AngularJS checkbox/复选框 根据缓存数据实时显示
想缓存选择按钮时，可以使用这样的方法。
index.html
<!DOCTYPE html>
<html data-ng-app="App">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script2.js"></script>
</head>
<body data-ng-controller="AddStyleCtrl"> <div>Choose Tags</div>
<div>
<div>You have choosen:</div>
<hr>
<label data-ng-repeat="selectedTag in selectedTags">
(({{selectedTag}}))
</label>
<hr>
<div data-ng-repeat="category in tagcategories">
<div>{{ category.name }}</div>
<div data-ng-repeat="tag in category.tags">
<div>
<input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
{{ tag.name }}
</div>
</div>
<hr>
</div>
</div> <pre>{{selected|json}}</pre>
<pre>{{selectedTags|json}}</pre> </body>
</html>
ng-checked:是angular封装用来控制该checkbox是否选中使用的，return true是选中，反则不选中；
ng-click：这个是angular封装的的onclick方法，可以传入$event；
script.js
var iApp = angular.module("App", []);
iApp.controller('AddStyleCtrl', function($scope)
{
$scope.tagcategories = [
{
name: 'Color',
tags: [
{
id:1,
name:'color1'
},
{
id:2,
name:'color2'
},
{
id:3,
name:'color3'
},
{
id:4,
name:'color4'
},
]
},
{
name:'Cat',
tags:[
{
id:5,
name:'cat1'
},
{
id:6,
name:'cat2'
},
]
},
{
name:'Scenario',
tags:[
{
id:7,
name:'Home'
},
{
id:8,
name:'Work'
},
]
}
];
$scope.selected = [];
$scope.updateSelection = function($event, id){
var checkbox = $event.target;
var action = (checkbox.checked?'add':'remove');//这里有点奇怪 相反了
if(action == 'add' && $scope.selected.indexOf(id) == -1){
$scope.selected.push(id);
}
if(action == 'remove' && $scope.selected.indexOf(id)!=-1){
var idx = $scope.selected.indexOf(id);
$scope.selected.splice(idx,1);
}
}
$scope.isSelected = function(id){
return $scope.selected.indexOf(id)>=0;
}
});
AngularJS checkbox/复选框 根据缓存数据实时显示的更多相关文章
- AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: 1 <!DOCTYPE h ...
- ZH奶酪：AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...
- （转）AngularJS判断checkbox/复选框是否选中并实时显示
最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...
- 通过编写串口助手工具学习MFC过程——（五）添加CheckBox复选框
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...
- php获取checkbox复选框的内容
php获取checkbox复选框的内容 由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...
- php怎么获取checkbox复选框的内容？
由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...
- php checkbox复选框值的获取与checkbox默认值输出方法
php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...
- 转 纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
随机推荐
- JS执行一次任务与定期任务与清除执行
1.一次性任务的执行与清除执行 1.定期执行 <script> timer = 0; timer = setTimeout(function() { console.log("s ...
- CentOS 6.8 部署django项目一
CentOS 6.8 部署django项目二 1.安装python3.5(默认是2.6) 参考:http://blog.csdn.net/shaobingj126/article/details/50 ...
- 为何time_before 起作用【转】
转自:http://decimal.blog.51cto.com/1484476/410673 Title: jiffies溢出与时间先后比较编制: chinakapok@sina.com日期:200 ...
- linux添加定时任务crond
1.crontab –e:编辑当前定时任务 保存完重新crond : service crond restart 2. crontab用法 crontab –e : 修改 crontab 文件,如果文 ...
- 『转载』hadoop2.x常用端口、定义方法及默认端口
『转载』hadoop2.x常用端口.定义方法及默认端口 1.问题导读 DataNode的http服务的端口.ipc服务的端口分别是哪个? NameNode的http服务的端口.ipc服务的端口分别是哪 ...
- zabbix客户端日志报错no active checks on server [192.168.3.108:10051]: host [192.168.3.108] not found
zabbix客户端日志报错: 45647:20160808:220507.717 no active checks on server [192.168.3.108:10051]: host [192 ...
- 编译安装lamp环境
httpd 2.4.9 + mysql-5.5.33 + php-5.4.29编译安装过程: 准备好以下安装包: mysql-5.5.33-linux2.6-x86_64.tar.gz apr-uti ...
- linux下的文件结构
linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可执行命令/dev 设备特殊文件/etc 系统管理和配置文件/etc/rc.d 启动的配置文件和脚本/home 用户主目录的基点,比如 ...
- ubuntu 语言设置
1.ubuntu ibus 输入法无法切换拼音 原因未安装中文输入法 sudo apt install ibus-pinyin //安装pinyinwin + space(空格) 切换中文输入法 再用 ...
- Math 对象
Math对象提供了,我们一般进行数学运算的所有函数. Math.random() 随机0~1之间的随机数 [0, 1) Math.max() 求传入参数的最大数 Math.min() 求传入参数的最小 ...