AngularJS中的兒童過濾器

我是AngularJS的新手，我希望使用AngularJS的過濾器來做一個樹形數據。AngularJS中的兒童過濾器

這是我在HTML代碼：

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    </head> 


    <body ng-app="myApp"> 
     <div ng-controller="myCtrl"> 
      <!-- <ul> 
       <li ng-repeat="friend in friends | removeBlank "> 
       [[ friend.name]] 
       </li> 
      </ul> --> 
      <table class="table table-condensed"> 
       <thead> 
        <tr> 
         <th ng-repeat="x in tableHeaders"> 
          <label>[[ x.name ]]</label> 
         </th> 
         <th class="text-center"><label>Options</label></th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="x in items | childrenFilter" ng-if="!noRecord"> 
         <td>[[ x.name ]]</td> 
         <td>[[ x.code ]]</td> 
         <td class="text-center"> 
          <a href="#/update/[[ x.id ]]"><span class="glyphicon glyphicon-pencil" data-toggle="tooltip" title="Update"></span></a> 
          <span class="glyphicon glyphicon-remove" data-toggle="tooltip" title="Delete"></span> 
         </td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html>

這裏是我的JS：

app = angular.module('myApp', []); 
app.config(function($interpolateProvider, $httpProvider) { 
    // Change template tags 
    $interpolateProvider.startSymbol('[['); 
    $interpolateProvider.endSymbol(']]'); 
}); 

app.filter('childrenFilter', function(){ 
    return function (items){ 
     nodeKey = 'children'; 

     for (var i = 0; i < items.length; i++) { 
      if(nodeKey in items[i]){ 
       x = items[i]; 
       while(nodeKey in x){ 
        x = x[nodeKey]; 
        for(y=0;y<x.length;y++){ 
         x = x[y]; 
        } 
       } 
      } 
     } 
    return items; 
    } 
}); 



app.controller('myCtrl', function($scope){ 
    $scope.items = [ 
     { 
      "name": "Tankers", 
      "code": "TANK", 
      "id": 1, 
      "children": [ 
       { 
        "name": "Oiler", 
        "code": "OIL", 
        "id": 2 
       }, 
       { 
        "name": "Chemical", 
        "code": "CHEM", 
        "id": 3, 
        "children": [ 
         { 
          "name": "Production", 
          "code": "PROD", 
          "id": 6 
         } 
        ] 
       } 
      ] 
     }, 
     { 
      "name": "Bulker", 
      "code": "BULK", 
      "id": 4, 
      "children": [ 
       { 
        "name": "Logger", 
        "code": "LOG", 
        "id": 5 
       } 
      ] 
     }, 
     { 
      "name": "Sterilized", 
      "code": "STER", 
      "id": 21 
     } 
    ]; 

    $scope.tableHeaders = [ 
     {'name': 'Name.'}, 
     {'name': 'Code'}, 
     {'name': 'Updated By'}, 
     {'name': 'Date Updated'}, 
    ]; 
});

說實話我有點卡住，我想要實現的是類似下面的圖像。當某個對象的所有兒童附加縮進和可切換

來源

2016-03-30 Dean Christian Armada

什麼是目前不工作？ –

我仍然試圖推動數組中的東西。爲了實現與圖像相似的東西 –

-1

你應該尋找我多一點在計算器上。我發現了另外一個問題，你試圖實現什麼： the issue和plnkr。我不認爲過濾器可以用於你的例子。

在JS當你定義一個對象，你並不需要把引號的屬性：name，code，id，children等

var data = [{ 
    name: "Tankers", 
    code: "TANK", 
    id: 1, 
    children: [ 
     // ... 
    ], 
    // ... 
}];

此外，在AngularJS你可以遍歷ng-repeat不僅在對象上，還對數組：

$scope.tableHeader = ["Name", "Code", "Updated By", "Date Updated", "Options"];

然後：

<th ng-repeat="header in tableHeader">{{header}}</th>

這裏是一個fiddle與您的代碼的一些更正。

一般來說，AngularJS有很多用於各種功能的模塊。例如，我認爲UI Grid可以幫助你實現你所需要的。

來源

2016-03-30 09:06:41 Lulylulu

你真的沒有回答這個問題。我使用方括號，因爲它與我的服務器端模板標籤衝突。我嘗試了其他模塊，但它與最後一列上的圖形標識衝突。 –

對不起，我沒有在控制器之前看到JS部分。你應該把代碼放在小提琴裏。 – Lulylulu

那麼你有沒有解決你的問題？ –

AngularJS中的兒童過濾器

回答

相關問題