angularjs - 如何使用递归函数在使用 angulat ui 树的树数组中选择父级?
问题描述
所以,我正在尝试创建一个分层树。Whena node is selected that has children, then all the children of the node is selected, but when I select all the children I also want to select the parent.
这是 plunker 的链接:[https://plnkr.co/plunk/iMBFfy6cf7urOHhZ][1]
我创建了一个目录来标记树
树控制器.js
(function (ng) {
var app = ng.module('tree', ['tree.service', 'tree.directives']);
app.controller("TreeController", ["TreeService", "$scope", function (TreeService, $scope) {
var tc = this;
buildTree();
function buildTree() {
TreeService.getTree().then(function (result) {
tc.tree = result.data;
}, function (result) {
alert("Tree no available, Error: " + result);
});
}
$scope.selectedItems = [];
$scope.getSelected = function(){
$scope.selectedItems = [];
function checkChildren(c) {
angular.forEach(c.children, function (c) {
if (c.checked){
$scope.selectedItems.push({"selected":c.name});
}
checkChildren(c);
});
}
angular.forEach(tc.tree, function(value, key) {
if (value.checked){
$scope.selectedItems.push({"selected":value.name});
}
checkChildren(value);
});
};
}]);
})(angular);
索引.html
<div ng-controller="TreeController as tc">
<ul class="tree">
<node-tree children="tc.tree"></node-tree>
</ul>
<button ng-click="getSelected()">Get Selected</button>
<br/>
<br/>
Selected:
<ul>
<li ng-repeat="item in selectedItems">
{{item.selected}}
</li>
</ul>
</div>
TreeDirective.js
(function (ng) {
var app = ng.module('tree.directives', []);
app.directive('nodeTree', function () {
return {
template: '<node ng-repeat="node in tree"></node>',
replace: true,
restrict: 'E',
scope: {
tree: '=children'
}
};
});
app.directive('node', function ($compile) {
return {
restrict: 'E',
replace: true,
templateUrl: 'node.html', // HTML for a single node.
link: function (scope, element) {
/*
* Here we are checking that if current node has children then compiling/rendering children.
* */
if (scope.node && scope.node.children && scope.node.children.length > 0) {
scope.node.childrenVisibility = true;
var childNode = $compile('<ul class="tree" ng-if="!node.childrenVisibility"><node-tree children="node.children"></node-tree></ul>')(scope);
element.append(childNode);
} else {
scope.node.childrenVisibility = false;
}
},
controller: ["$scope", function ($scope) {
// This function is for just toggle the visibility of children
$scope.toggleVisibility = function (node) {
if (node.children) {
node.childrenVisibility = !node.childrenVisibility;
}
};
// Here We are marking check/un-check all the nodes.
$scope.checkNode = function (node) {
node.checked = !node.checked;
// if (node.checked){
// alert("clicked");
// }
function checkChildren(c) {
angular.forEach(c.children, function (c) {
c.checked = node.checked;
checkChildren(c);
});
}
checkChildren(node);
};
}]
};
});
})(angular);
节点.html
<li>
<span ng-click="toggleVisibility(node)"> {{ ( node.childrenVisibility && node.children.length ) ? '+' : '-' }}</span>
<input ng-click="checkNode(node)" type="checkbox" ng-checked="node.checked">
<span>
{{ $index + 1 }}. {{ node.name }}
</span>
</li>
解决方案
第一步是确定每个节点的父节点是什么。我们可以通过在树加载后立即递归并parent
在每个节点上设置一个属性来做到这一点。
树控制器.js
...
function buildTree() {
TreeService.getTree().then(function (result) {
tc.tree = result.data;
function setParentForChildren(n) {
angular.forEach(n.children, function (c) {
c.parent = n;
setParentForChildren(c);
})
}
angular.forEach(tc.tree, setParentForChildren);
}, function (result) {
alert("Tree no available, Error: " + result);
});
}
...
现在,我们可以在每次选中一个框时使用该父引用来递归树并为每个父节点说“如果我所有的孩子都被选中,那么我也应该被选中”。
TreeDirective.js
...
$scope.checkNode = function (node) {
node.checked = !node.checked;
function checkParent(n) {
if (!n.parent)
return;
const p = n.parent;
p.checked = p.children.every(function(c) { return c.checked });
checkParent(p);
}
checkParent(node);
function checkChildren(c) {
angular.forEach(c.children, function (c) {
c.checked = node.checked;
checkChildren(c);
});
}
checkChildren(node);
};
...
推荐阅读
- python - Python中更多不必要的变量是否意味着更多的内存使用?
- c# - AES 加密视频流不适用于 ios 设备中的 azure 媒体播放器
- google-cloud-storage - Google Cloud Storage JSON API 中插入存储桶中生命周期属性的用途是什么?
- python - 如果 Pandas 数据框列中存在列表值列表,则将其替换为另一个 Pandas 列中的值
- python - 无法正确生成 Numpy FFT
- vue.js - 如何在具有特定类的特定单元格之前/之后添加类或突出显示所有单元格?
- php - 使用/扩展 Doctrine 实体
- java - Java - 'throws' 子句中没有从正文中抛出的异常
- c++ - 将 boost::strand 包装的处理程序存储在数组中
- python - 如何使用 python 处理自定义 404 页面