AngularJS, отображающий иерархические данные

Question

Я пытаюсь отобразить список данных в иерархическом представлении. Мои данные выглядит примерно так:

items:[ 
    { 
    "model_id": "1", 
    "model_type_id": "1", 
    "name": "Parent 1", 
    "model_parent_id": "" 
    }, 
    { 
    "model_id": "2", 
    "model_type_id": "1", 
    "name": "Parent 2", 
    "model_parent_id": "" 
    }, 
    { 
    "model_id": "3", 
    "model_type_id": "2", 
    "name": "Child 1", 
    "model_parent_id": "1" 
    }, 
    { 
    "model_id": "4", 
    "model_type_id": "2", 
    "name": "Child 2", 
    "model_parent_id": "2" 
    } 
] 

Мой контроллер выглядит так:

myApp.controller('ModelController', ['$scope', 'ModelFactory', 
    function ($scope, ModelFactory) { 

     $scope.init = function (id) { 
      $scope.brandId = id; 
      getModels($scope.brandId); 
     }; 

     function getModels(brandId) { 

      ModelFactory.GetModels(brandId) 
       .success(function (mdls) { 
        $scope.models = mdls; 
        console.log($scope.mdls); 
       }) 
       .error(function (error) { 
        $scope.status = 'Unable to load model data: ' + error.message; 
        console.log($scope.status); 
       }); 
     }; 
    } 
]); 

Мой HTML выглядит следующим образом:

<div ng-controller="ModelController" ng-init="init(brand.ID)"> 
    <ul ng-sortable class="block__list block__list_words"> 
     <li ng-repeat="model in models | filter: {model_type_id:1} ">{{model.model_name}} - {{model.model_id}} 

      <div ng-controller="ModelController" ng-init="init(brand.ID)"> 
       <ul ng-sortable class="block__list block__list_words"> 
        <li ng-repeat="m in models | filter: {model_type_id:2} | filter:{model_parent_id:model.model_id}"> 
         {{m.model_name}} - {{m.model_parent_id}} 
        </li> 
       </ul> 
      </div> 

     </li> 
    </ul> 
</div> 

Фильтр не работает, когда я пытаюсь для фильтрации на внутреннем контроллере с внешним контроллером. Я получаю обоих детей, отображаемых ниже каждого родителя. Как я могу получить его так, чтобы родительский указатель отображался, и отображаются только дети, где childs model_parent_id равно model_id родителя?

Answer 1

Хотя я не уверен, есть ли способ достичь этого с помощью фильтра, обычный способ отображения вложенных данных состоит в том, чтобы реорганизовать структуру данных, чтобы отразить то, что вы хотите отобразить.

items:[ 
    { 
    "model_id": "1", 
    "model_type_id": "1", 
    "name": "Parent 1", 
    "children": [{ 
     "model_id": "3", 
     "model_type_id": "2", 
     "name": "Child 1" 
    }] 
    }, 
    { 
    "model_id": "2", 
    "model_type_id": "1", 
    "name": "Parent 2", 
    "children": [{ 
     "model_id": "3", 
     "model_type_id": "2", 
     "name": "Child 2" 
    }] 
    } 
] 

А затем отобразить их с помощью вложенной нг-повторить

<ul> 
    <li ng-repeat="parent in items"> 
    {{parent.name}} - {{parent.model_id}} 
    <ul> 
     <li ng-repeat="child in parent.children"> 
     {{child.name}} - {{child.model_id}} 
     </li> 
    </ul> 
    </li> 
</ul> 

Примечание: Там нет необходимости использовать вложенные контроллеры, только один на верхнем слое должно быть достаточно. Если вам нужно рекурсивно использовать некоторую общую логику, используйте специальную директиву для замены li.

Для реорганизации данных, которые вы можете выполнить либо на стороне сервера, либо на стороне клиента. Ниже показано, как делать на стороне клиента, поскольку у нас может не быть разрешения на изменение API-интерфейса на стороне сервера.

$scope.data = []; 
angular.forEach(items, function(item) { 
    if (item.model_parent_id == "") { 
     $scope.data.push(item); 
    } 
}); 

// add all parents first in case some children comes before parent 
angular.forEach(items, function(item) { 
    if (item.model_parent_id == "") continue; 

    // search for parent 
    angular.forEach($scope.data, function(parent) { 
     if (parent.model_id == item.model_parent_id) { 
      if (!parent.children) parent.children = []; 
      parent.children.push(item); 
     } 
    } 
});