angular 级联选择
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 级联选择的更多相关文章
- XML:使用DOM技术解析xML文件中的城市,实现select级联选择
中国的城市xml格式:cities.xml <?xml version="1.0" encoding="utf-8"?> <china> ...
- ExtJs4中的复选树级联选择
好久没有写新的博文了,过了个年休息了近一个月,人都懒散了.. 这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样.升级并不是一件简单的是,基本相当于重写了, ...
- extjs tree check 级联选择
extjs4 tree check 级联选择 实现效果: 关键代码: function changeAllNode(node, isCheck) { allChild(node, isCheck); ...
- Ajax级联选择框
Ajax级联选择框 级联选择框常用与比较负责的网页开发,例如实现的商品添加页面中,需要选择商品的分类,而分类信息又有层次,例如大分类和小分类就是两层级联,在用户选择商品所属大类时,所属小类的内容需要根 ...
- .NET快速信息化系统开发框架 V3.2 -> Web 用户管理模块编辑界面-组织机构选择支持级联选择
下拉框级联选择功能非常的实用,框架用户管理编辑界面对组织机构的选择在3.2版本中新增了级联选择的支持,让组织机构的选择更加的方便与高效,也不容易出错. 我们框架的组织机构结合实际分成了5种类型,分别为 ...
- voinc+vue实现级联选择
需求: vonic中实现级联选择 <!DOCTYPE html> <html> <head> <title>下拉框</title> < ...
- 利用InfoPath实现SharePoint Server 2013列表的级联选择(Cascading Drop Down List)
最近在利用SharePoint Server 2013的列表组织和存储数据,发现SharePoint列表原始不支持级联选择的功能. 谷歌百度一通以后,发现了很多通过代码实现的方案,利用第三方的插件sp ...
- js省市区级联选择联动
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Con ...
- ElementUI 级联选择框 设置最后一级可选及相关问题解决
在使用 elementUI 的 el-cascader 级联选择框进行省市联动效果时,有这么一个需求:该级联选择框一共有三级结构分别为国家-省份-城市,国家和省份为必选项,城市为可选项.具体实现如下: ...
随机推荐
- thinkphp 防止XSS(跨站脚本攻击)
XSS(跨站脚本攻击)可以用于窃取其他用户的Cookie信息,要避免此类问题,可以采用如下解决方案: 直接过滤所有的JavaScript脚本: 转义Html元字符,使用htmlentities.htm ...
- JZOJ5153:树形图求和
Description Input Output HINT 题解: 一种很直观的想法是通过矩阵生成树求树形图方法数ans以及不包含某一条边i的树形图方法数ans[i],则答案为Σ(ans-ans[i] ...
- NX二次开发-UFUN工程图表格注释设置单元格首选项UF_TABNOT_set_cell_prefs
NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...
- 安装zabbix需求环境
yum install gcc gcc-c++ make mysql-server mysql-devel libcurl-devel net-snmp-devel php php-ldap php- ...
- 其它课程中的python---2、NumPy模块
其它课程中的python---2.NumPy模块 一.总结 一句话总结: numpy在数组计算方面又快又方便 1.NumPy中的ndarray是一个多维数组对象,该对象由哪两部分组成? -实际的数据 ...
- java基础编程题(2)
1.给定一个二叉树,找出其最大深度. 注:二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. /** * Definition for a binary tree node. * public ...
- scala容器对象(转载)
1Array 数组 Scala的数组是这个样子: val arr = new Array[String](3) 程序员们基本都看得懂,new 一个Array对象,它的类型是String,长度为3.对元 ...
- 【Latex】一些使用
http://www.mohu.org/info/symbols/symbols.htm GG..研究个公式就搞这么晚了..还不知道那三个报错的是怎么回事.. 意识模糊..睡了睡了. # Latex ...
- Codeforces 479【A】div3试个水
题目链接:http://codeforces.com/problemset/problem/977/A 题意:这个题,题目就是让你根据他的规律玩嘛.末尾是0就除10,不是就-1. 题解:题解即题意. ...
- JS事件 内容选中事件(onselect)选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。
内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...