Question

我有一系列餐馆对象，我想通过分组他们的城市来列出它们

我的对象就像;

restaurant = {
     id: 'id',
     name: 'name',
     city: 'city'
}

此HTML标记可以提供有关我想要做的事情的一些信息。

 <div ng-repeat="restaurant in restaurant | filter: ???">
        <div class="header">
            <h1 ng-bind="restaurant.city"></h1>
            <a>Select All</a>
        </div>
        <div class="clearfix" ng-repeat="???">
            <input type="checkbox" id="restaurant.id" />
            <label ng-bind="restaurant.name"></label>
        </div>
    </div>

我可以使用一个阵列来完成，还是需要创建单独的城市和餐馆阵列呢？

Answer 1

如果您想按城市对餐馆进行分组，可以使用angular.filter模块的groupBy。

只需将JS文件从此处添加：http://www.cdnjs.com/libraries/angular-filter到您的项目并使用以下代码。

var myApp = angular.module('myApp',['angular.filter']);

function MyCtrl($scope) {    
    $scope.restaurants = [
       {id: 1, name: 'RestA', city: 'CityA'},
       {id: 2, name: 'RestB', city: 'CityA'},
       {id: 3, name: 'RestC', city: 'CityC'},
       {id: 4, name: 'RestD', city: 'CityD'}
    ];
}

<div ng-controller="MyCtrl">
    <ul ng-repeat="(key, value) in restaurants | groupBy: 'city'">
        <b>{{ key }}</b>
      <li ng-repeat="restaurant in value">
          <i>restaurant: {{ restaurant.name }} </i>
      </li>
    </ul>
</div>

我已经通过工作示例为您创建了JSFiddle。

AngularJS基于重复的对象属性过滤嵌套的ng-repeat

1 个答案: