html：
<div ng-app="myApp" ng-controller="myController">
<button class="btn btn-sm btn-primary" ng-click="functionAuthority.clickAll=!functionAuthority.clickAll">{{!functionAuthority.clickAll?'全选':'全不选'}}</button>
<tree-view tree-data="functionAuthority.tree" text-field="name" can-checked="true" clickall="functionAuthority.clickAll"></tree-view>
</div>
js：
angular.module('myApp', [])
.directive('treeView',[function(){
return {
restrict: 'E',
templateUrl: './treeView.html',
scope: {
treeData: '=',
canChecked: '=',
textField: '@',
clickall: '='
},
link: function($scope){
$scope.$watch('clickall',function(newVal){
$scope.treeData.forEach(function(val,i,arr){
$scope.updateChildrenChecked(val,newVal);
})
})
},
controller:['$scope', function($scope){
//点击checkbox
$scope.itemClick = function(item,$event){
$scope.updateChildrenChecked(item,$event.target.checked);
}
//下属全选/全不选
$scope.updateChildrenChecked = function(item, value){
item.$$isChecked=value;
if(item.children&&item.children.length>0){
item.children.forEach(function(val,i,arr){
$scope.updateChildrenChecked(val,value);
val.$$isChecked=value
})
}
}
}]
};
}]).controller('myController',['$scope',function($scope){
$scope.functionAuthority={
clickAll:false,
tree: [
{
"id":"1",
"pid":"0",
"name":"家用电器",
"children":[
{
"id":"4",
"pid":"1",
"name":"大家电",
"children":[
{
"id":"7",
"pid":"4",
"name":"空调",
"children":[
{
"id":"15",
"pid":"7",
"name":"海尔空调"
},
{
"id":"16",
"pid":"7",
"name":"美的空调"
}
]
},
{
"id":"8",
"pid":"4",
"name":"冰箱"
},
{
"id":"9",
"pid":"4",
"name":"洗衣机"
},
{
"id":"10",
"pid":"4",
"name":"热水器"
}
]
},
{
"id":"5",
"pid":"1",
"name":"生活电器",
"children":[
{
"id":"19",
"pid":"5",
"name":"加湿器"
},
{
"id":"20",
"pid":"5",
"name":"电熨斗"
}
]
}
]
},
{
"id":"2",
"pid":"0",
"name":"服饰",
"children":[
{
"id":"13",
"pid":"2",
"name":"男装"
},
{
"id":"14",
"pid":"2",
"name":"女装"
}
]
},
{
"id":"3",
"pid":"0",
"name":"化妆",
"children":[
{
"id":"11",
"pid":"3",
"name":"面部护理"
},
{
"id":"12",
"pid":"3",
"name":"口腔护理"
}
]
}
]
}
})
treeView.html：
<ul class="tree-view"> <li ng-repeat="item in treeData" ng-include="'./treeItem.html'" ></li> </ul>
treeItem.html：
<input type="checkbox" ng-model="item.$$isChecked" class="check-box" ng-if="canChecked" ng-click="itemClick(item,$event)">
<span class="glyphicon" ng-if="item.children" ng-class="!item.$$isShow?'glyphicon-triangle-right':'glyphicon-triangle-bottom'" ng-click="item.$$isShow=!item.$$isShow"></span>
<span class='text-field' ng-click="item.$$isShow=!item.$$isShow">{{item[textField]}}</span>
<ul class="sidebar-menu" ng-show="item.$$isShow">
<li ng-repeat="item in item.children" ng-include="'./treeItem.html'" class="treeview ">
</li>
</ul>
展示：
