HTML:

<link rel="stylesheet" href="views/tree/checkbox.css"/> <div class="tree"> <ul> <li ng-repeat="country in vm.countries" ng-class="{closed:country.closed}"> <div> <input type="checkbox" ng-model="country.checked" ng-change="vm.countryChanged(country)" ng-class="{intermediate: vm.isIntermediateCountry(country)}"/> <span ng-click="country.closed=!country.closed"> <span class="glyphicon" ng-class="country.closed?'glyphicon-plus':'glyphicon-minus'"></span> <img ng-src="data:images/{{country.flag}}"/> {{country.label}} </span> </div> <ul ng-class="{hidden: country.closed}"> <li ng-repeat="province in country.provinces" ng-class="{closed:province.closed}"> <input type="checkbox" ng-model="province.checked" ng-change="vm.provinceChanged(province, country)" ng-class="{intermediate: vm.isIntermediateProvince(province)}"/> <span ng-click="province.closed=!province.closed"> <span class="glyphicon" ng-class="province.closed?'glyphicon-plus':'glyphicon-minus'"></span> {{province.label}} </span> <ul ng-class="{hidden: province.closed}"> <li ng-repeat="city in province.cities"> <label> <input type="checkbox" ng-model="city.checked" ng-change="vm.cityChanged(city, province, country)"/> {{city.label}} </label> </li> </ul> </li> </ul> </li> </ul> </div> <h3>说明</h3> 这是一个使用controller中的逻辑来实现级联复选框的表,可以支持级联选择以及半选中(semi-checked)状态

JS:

'use strict'; angular.module('ngShowcaseApp').controller('ctrl.tree.checkbox', function ($scope, CityData) { var vm = $scope.vm = {}; vm.countries = CityData; vm.countryChanged = function(country) { // 自动选中所有下级 _.each(country.provinces, function(province) { province.checked = country.checked; _.each(province.cities, function(city) { city.checked = country.checked; }); }); }; vm.provinceChanged = function(province, country) { // 自动选中所有下级 _.each(province.cities, function(city) { city.checked = province.checked; }); // 如果有任何一个子节点被选中,则让上级节点也选中 // 注意!checkbox的ng-model只能绑定到逻辑型值,所以不能直接把findWhere的结果赋值过去 country.checked = !!_.findWhere(country.provinces, {checked: true}) }; vm.cityChanged = function(city, province, country) { // 如果有任何一个子节点被选中,则让上级节点也选中 // 注意!checkbox的ng-model只能绑定到逻辑型值,所以不能直接把findWhere的结果赋值过去 province.checked = !!_.findWhere(province.cities, {checked: true}); country.checked = !!_.findWhere(country.provinces, {checked: true}); }; vm.isIntermediateCountry = function(country) { // 是否有任何被选中的节点 var hasChecked = _.find(country.provinces, function(province) { return province.checked && _.findWhere(province.cities, {checked: true}); }); // 是否有任何没有选中的节点 var hasNoChecked = _.find(country.provinces, function(province) { return !province.checked || _.findWhere(province.cities, {checked: false}); }); // 如果同时有选中状态和非选中的节点,则为中间状态 return hasChecked && hasNoChecked; }; vm.isIntermediateProvince = function(province) { var hasChecked = _.findWhere(province.cities, {checked: true}); var hasNoChecked = _.findWhere(province.cities, {checked: false}); return hasChecked && hasNoChecked; }; });

CSS:

.tree li { cursor: pointer; padding-left: 1.3em; } .tree ul { list-style: none; padding-left: 0; } .intermediate { opacity: 0.3; }

angular 级联选择的更多相关文章

  1. XML:使用DOM技术解析xML文件中的城市,实现select级联选择

    中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...

  2. ExtJs4中的复选树级联选择

    好久没有写新的博文了,过了个年休息了近一个月,人都懒散了.. 这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样.升级并不是一件简单的是,基本相当于重写了, ...

  3. extjs tree check 级联选择

    extjs4 tree check 级联选择 实现效果: 关键代码: function changeAllNode(node, isCheck) { allChild(node, isCheck); ...

  4. Ajax级联选择框

    Ajax级联选择框 级联选择框常用与比较负责的网页开发,例如实现的商品添加页面中,需要选择商品的分类,而分类信息又有层次,例如大分类和小分类就是两层级联,在用户选择商品所属大类时,所属小类的内容需要根 ...

  5. .NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择

    下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错. 我们框架的组织机构结合实际分成了5种类型,分别为 ...

  6. voinc+vue实现级联选择

    需求: vonic中实现级联选择 <!DOCTYPE html> <html> <head> <title>下拉框</title> < ...

  7. 利用InfoPath实现SharePoint Server 2013列表的级联选择(Cascading Drop Down List)

    最近在利用SharePoint Server 2013的列表组织和存储数据,发现SharePoint列表原始不支持级联选择的功能. 谷歌百度一通以后,发现了很多通过代码实现的方案,利用第三方的插件sp ...

  8. js省市区级联选择联动

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...

  9. ElementUI 级联选择框 设置最后一级可选及相关问题解决

    在使用 elementUI 的 el-cascader 级联选择框进行省市联动效果时,有这么一个需求:该级联选择框一共有三级结构分别为国家-省份-城市,国家和省份为必选项,城市为可选项.具体实现如下: ...

随机推荐

  1. thinkphp 防止XSS(跨站脚本攻击)

    XSS(跨站脚本攻击)可以用于窃取其他用户的Cookie信息,要避免此类问题,可以采用如下解决方案: 直接过滤所有的JavaScript脚本: 转义Html元字符,使用htmlentities.htm ...

  2. JZOJ5153:树形图求和

    Description Input Output HINT 题解: 一种很直观的想法是通过矩阵生成树求树形图方法数ans以及不包含某一条边i的树形图方法数ans[i],则答案为Σ(ans-ans[i] ...

  3. NX二次开发-UFUN工程图表格注释设置单元格首选项UF_TABNOT_set_cell_prefs

    NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...

  4. 安装zabbix需求环境

    yum install gcc gcc-c++ make mysql-server mysql-devel libcurl-devel net-snmp-devel php php-ldap php- ...

  5. 其它课程中的python---2、NumPy模块

    其它课程中的python---2.NumPy模块 一.总结 一句话总结: numpy在数组计算方面又快又方便 1.NumPy中的ndarray是一个多维数组对象,该对象由哪两部分组成? -实际的数据 ...

  6. java基础编程题(2)

    1.给定一个二叉树,找出其最大深度. 注:二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. /** * Definition for a binary tree node. * public ...

  7. scala容器对象(转载)

    1Array 数组 Scala的数组是这个样子: val arr = new Array[String](3) 程序员们基本都看得懂,new 一个Array对象,它的类型是String,长度为3.对元 ...

  8. 【Latex】一些使用

    http://www.mohu.org/info/symbols/symbols.htm GG..研究个公式就搞这么晚了..还不知道那三个报错的是怎么回事.. 意识模糊..睡了睡了. # Latex ...

  9. Codeforces 479【A】div3试个水

    题目链接:http://codeforces.com/problemset/problem/977/A 题意:这个题,题目就是让你根据他的规律玩嘛.末尾是0就除10,不是就-1. 题解:题解即题意. ...

  10. JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。

    内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...