angularjs - 如何在 AngularJS 中使用 ng-repeat 创建嵌套结构

标签 angularjs angularjs-ng-repeat ng-show ionic-v1

ng-repeat、AngularJS 循环问题

我在 Angular js(ionic 1 应用程序)中使用 ng-repeat 创建此循环结构时遇到问题。当我使用 ng-repeat 时,日期会与每个循环中的每个事件一起重复显示。但我只想为相应的事件显示一次日期,如图所示。

image

最佳答案

您需要一个groupBy过滤器,您(手动编写,或)从 angular-filter 获取该过滤器模块。只需设置一个 JSON,其中事件和日期一起列出即可。这是一个小演示,您可以根据您的示例进行调整:

var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
  $scope.events = [{
      "date": "Sept-1",
      "event": "Event 1"
    },
    {
      "date": "Sept-1",
      "event": "Event 2"
    },
    {
      "date": "Sept-2",
      "event": "Event 3"
    },
    {
      "date": "Sept-2",
      "event": "Event 4"
    },
    {
      "date": "Sept-3",
      "event": "Event 5"
    },
  ]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <div ng-repeat="(key, value) in events | groupBy: 'date'">
      - {{key}}
      <div ng-repeat="val in value">
        * {{val.event}}
      </div>
      <br>
    </div>

  </div>

</body>
</html>

关于angularjs - 如何在 AngularJS 中使用 ng-repeat 创建嵌套结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51933357/

相关文章:

javascript - 相当于 hasAttribute() 的 AngularJS?

javascript - 检测指令是否从 DOM 中移除

javascript - Angular 1.x ng-repeat 显示数据,而直接模板绑定(bind)不显示

javascript - 如何在 AngularJS 中显示具有用户身份验证的按钮?

javascript - 在 Angular 中,为什么我的 ng-shows 没有更新以反射(reflect)当前范围?

javascript - 如何在 AngularJS 中排序时删除重复值?

javascript - 具有angularJS应用程序的 Angular Material

javascript - AngularJS:http 链调用问题和 NodeJS:在多个 http 调用中使用变量的问题

javascript - ng-repeat 可以在 Angular Js 中接受用户定义的 $index 增量吗?

javascript - AngularJS ng-点击 : How to pass row data to modal pop up textboxes