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中的儿童过滤器

回答

相关问题