angular复选框式js树形菜单（一）

<ul class="tree-view">
<li ng-repeat="item in treeData" ng-include="itemTemplateUrl||'/treeItem.html'" ></li>
</ul>

<i ng-click="itemExpended(item, $event);" class="getItemIcon(item)"></i><input type="checkbox" ng-model="item.checked" class="check-box" ng-if="canChecked" ng-change="warpCallback('itemCheckedChanged', item, $event)"><span class='text-field' ng-click="warpCallback('itemClicked', item, $event);">{{item.name}}</span>
<ul ng-if="!isLeaf(item)" ng-show="item.$$isExpend">
<li ng-repeat="item in item.childItems" ng-include="itemTemplateUrl||'/treeItem.html'">
</li>
</ul>

<tree-view tree-data="vm.treeData" itemTemplateUrl="vm.itemTemplateUrl"
item-clicked="vm.itemClicked($item)"
item-checked-changed="vm.itemCheckedChanged($item)" can-checked="true">
</tree-view>

angular.module('app', [])
.directive('treeView',[function(){ return {
restrict: 'E',
templateUrl: '/treeView.html',
scope: {
treeData: '=',
canChecked: '=',
textField: '@',
itemClicked: '&',
itemCheckedChanged: '&',
itemTemplateUrl: '@'
},
controller:['$scope', function($scope){
$scope.itemExpended = function(item, $event){
item.$$isExpend = ! item.$$isExpend;
$event.stopPropagation();
}; $scope.getItemIcon = function(item){
var isLeaf = $scope.isLeaf(item); if(isLeaf){
return 'fa fa-leaf';
} return item.$$isExpend ? 'fa fa-minus': 'fa fa-plus';
}; $scope.isLeaf = function(item){
return !item.children || !item.children.length;
}; $scope.warpCallback = function(callback, item, $event){
($scope[callback] || angular.noop)({
$item:item,
$event:$event
});
};
}]
};
}]);

angular.module('app')
.controller('treeCtrl',function(){
var vm = this;
vm.treeData=[
{
id:"0010",
fatherId:"0000",
name:"流程管理",
checked:true,
childItems:[
{
id:"0020",
fatherId:"0010",
name:"个人任务池",
checked:true,
childItems:[
id:"0030",
fatherId:"0020",
name:"受理",
checked:true,
childItems:[]
]
},
{
id:"0021",
fatherId:"0010",
name:"公共任务池",
checked:false,
childItems:[]
}
]
},
{
id:"0100",
fatherId:"0000",
name:"信息查询",
checked:true,
childItems:[
{
id:"0120",
fatherId:"0100",
name:"计划信息",
checked:true,
childItems:[]
},
{
id:"0120",
fatherId:"0100",
name:"管理人信息",
checked:false,
childItems:[]
}
]
}
];
vm.itemCheckedChanged = function (changeItem) {
if (hasChildItems(changeItem)) {
setChildItems(changeItem);
}
setParentItems(changeItem);
};
function setChildItems(changeItem){
angular.forEach(changeItem.childItems,function(childItem){
changeItem.checked = changeItem.checked;
if(hasChildItems(childItem)){
setChildItems(childItem);
}
})
}
function setParentItems(changeItem){
definedParentItem(vm.treeData,changeItem);
}
function findParentItem(item,changeItem){
definedParentItem(item.childItems,changeItem);
}
function definedParentItem(childItems,changeItem){
var parentItem = _.find(childItems,{id:changeItem.fatherId});
if(!!parentItem){
parentItem.checked = isAllSelected(parentItem);
setParentItems(parentItem);
}else{
angular.forEach(childItems,function(childItem){
if(hasChildItems(childItem)){
findParentItem(childItem);
}
});
}
}
function isAllSelected(item){
var isSelected = [];
if(hasChildItems(item.childItems)){
angular.forEach(item.childItems,function(childItem){
isAllSelected.push(changeItem.checked);
});
}
return isSelected.indexOf(true)!==-1;
}
function hasChildItems(item){
return !!item.childItems && item.childItems.length>0;
}
});