Javascript 儿童用AngularJS过滤_Javascript_Angularjs_Json

Javascript 儿童用AngularJS过滤

javascript angularjs json

Javascript 儿童用AngularJS过滤,javascript,angularjs,json,Javascript,Angularjs,Json,我是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.g

我是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'},
    ];
});

老实说，我有点被卡住了，我想要实现的与下图相似。其中某个对象的所有子对象都被追加缩进，并且可以进行切换

你应该多搜索一下StackOverflow。我发现了另一个问题，就是你想要实现什么：还有。我不认为过滤器可以用于你的例子

在JS中定义对象时，不需要为属性加引号：名称、代码、id、子对象等

此外，在AngularJS中，您不仅可以在对象上，还可以在数组上使用ng repeat进行迭代：

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

然后：

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

下面是一个示例，其中包含对代码的一些更正

一般来说，AngularJS有很多用于各种功能的模块。

例如，我认为可以帮助您实现所需目标。

目前哪些功能不起作用？我仍在尝试将内容整合到一个阵列中。为了达到与想象相似的效果，你真的没有回答这个问题。我使用方括号是因为它与服务器端模板标记冲突。我尝试了其他模块，但是它与上一列中的图标冲突。哦，很抱歉，在控制器之前我没有看到JS部分。你真的应该把代码放在一把小提琴里。我更新了答案。已经有人提出了类似的问题。我不认为你可以在你的例子中使用过滤器。恐怕你更新的链接不能回答我的问题

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