您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何使用AngularJS处理数据的递归渲染

如何使用AngularJS处理数据的递归渲染

而不是嵌套您的控制器,而是嵌套数据并仅拥有一个控制器。

该视图由递归引用自己的模板处理。

正如chadermani所链接的那样,那里有一些答案。

这是一个很好的例子的小提琴(不是我的代码

http://jsfiddle.net/brendanowen/uXbn6/8/

和小提琴中的代码

<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({name: newName,nodes: []});
    };
    $scope.tree = [{name: "Node", nodes: []}];
}]);
其他 2022/1/1 18:14:28 有614人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶