AngularJS와 내가 레스토랑 객체의 배열을 가지고

Question

반복 객체 속성에 따라 중첩 된 NG 반복을 필터링하고 내가 그들의 도시를 그룹화하여 해당 목록을 나열 할

내 목적은 같다;

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

도시별로 레스토랑을 그룹화하려는 경우 groupBy를 angular.filter 모듈로 사용할 수 있습니다.

http://www.cdnjs.com/libraries/angular-filter의 JS 파일을 프로젝트에 추가하고 다음 코드를 사용하십시오.

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을 생성했습니다.