treeView.html

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

treeItem.html

<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>

controller.html

<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>

treeView.directive

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
});
};
}]
};
}]);

treeView.controller

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;
}
});

angular复选框式js树形菜单(一)的更多相关文章

  1. angular复选框式js树形菜单(二)

    删除(过滤)树形结构某一个子节点: function filterTreeData(treeData){ angular.forEach(treeData,function(item){ if (it ...

  2. DOM(十)使用DOM设置单选按钮、复选框、下拉菜单

    1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...

  3. JQuery对单选框,复选框,下拉菜单的操作

    JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...

  4. 单选复选框的js代码取值

    单选框 复选框选中后的js代码处理 <script type="text/javascript"> function check(){ document.getElem ...

  5. angular 复选框checkBox多选的应用

    应用场景是这样的,后台返回的数据在页面上复选框的形式repeat出来 可能会有两种需求: 第一:后台返回的只有项,而没有默认选中状态(全是待选状态) 这种情况相对简单只要repeat出相应选项 第二: ...

  6. JS实现带复选框的下拉菜单

    这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...

  7. layui 单选框、复选框、下拉菜单 不显示问题 记录

    1. 如果是 ajax嵌套了 页面, 请确保  只有最外层的页面引入了 layui.css 和 layui.js 内层页面 切记不要再次引入 2. layui.use(['form', 'upload ...

  8. jq获取单选框、复选框、下拉菜单的值

    1.<input type="radio" name="testradio" value="jquery获取radio的值" /> ...

  9. JS树形菜单

    超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...

随机推荐

  1. python 报错——Python TypeError: 'module' object is not callable 原因分析

    原因分析:Python导入模块的方法有两种: import module 和 from module import 区别是前者所有导入的东西使用时需加上模块名的限定,而后者则不需要 例: >&g ...

  2. 高斯过程(GP)

    随机过程基本概念: 随机过程是一个比随机变量更广泛的概念.在概率论中,通常研究一个或多个这样有限个数的随机变量,即使在大数定律和中心极限定理中考虑了无穷多个随机变量,但也要假设随机变量之间互相独立.而 ...

  3. Python爬虫:爬取自己博客的主页的标题,链接,和发布时间

    代码 # -*- coding: utf-8 -*- """ ------------------------------------------------- File ...

  4. 剑指offer 面试43题

    面试43题: 题目:1~n整数中1出现的次数 题:输入一个整数n,求1~n这n个整数的十进制表示中1出现的次数.例如,输入12,1~12这些整数中包含1的数字有1,10,11,12一共出现了5次. 解 ...

  5. Putty常用属性设置

    1. 使用 UTF-8避免显示乱码 2.调整 Lines of scrollback,能够回看更多的控制台输出log 3.调整颜色和字体使得看上去更舒服 4.解决数字键盘无法输入数字的问题 效果图:

  6. iOS警告框和操作表

    应用如何与用户交流呢? 警告框(AlertView)和操作表(ActionSheet)就是为此而设计的. 本文案例的原型草图如图3-48所示,其中有两个按钮“Test警告框”和“Test操作表”,点击 ...

  7. 合并apk和odex 为完整的apk安装文件

    from:http://bbs.hiapk.com/thread-1151284-1-1.html 文件夹:<ignore_js_op> 文件夹拖放到odex.cmd,出现下面的窗口后,按 ...

  8. 每天一个Linux命令(53)service命令

        service命令用于对系统服务进行管理.   (1)用法:     用法:  service  [服务]  [操作]   (2)功能:     功能:  service命令用于启动.停止.重 ...

  9. 024_MapReduce中的基类Mapper和基类Reducer

    内容提纲 1) MapReduce中的基类Mapper类,自定义Mapper类的父类. 2) MapReduce中的基类Reducer类,自定义Reducer类的父类. 1.Mapper类 API文档 ...

  10. FAT和EXFAT文件系统

    文件系统 文件系统是操作系统用于明确磁盘或分区上的文件的方法和数据结构:即在磁盘上组织文件的方法.在移动存储设备上比较常用的有FAT文件系统和ExFAT文件系统. FAT分区依据FAT表中每个簇链的所 ...