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" 
    }] 
    } 
] 

，然後使用嵌套顯示它們NG-重複

<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); 
     } 
    } 
});