Angularjs Ng_repeat中实现复选框选中并显示不同的样式
最近做了一个选择标签的功能，把一些标签展示给用户，用户选择自己喜欢的标签，就类似我们在购物网站看到的那种过滤标签似的；
简单的效果如图所示：
首先看一下html代码：
1 <!DOCTYPE html>
2 <html data-ng-app="App">
3 <head>
4 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
5 <script src="script2.js"></script>
6 </head>
7 <body data-ng-controller="AddStyleCtrl">
8
9 <div>Choose Tags</div>
10 <div>
11 <div>You have choosen:</div>
12 <hr>
13 <label data-ng-repeat="selectedTag in selectedTags">
14 (({{selectedTag}}))
15 </label>
16 <hr>
17 <div data-ng-repeat="category in tagcategories">
18 <div>{{ category.name }}</div>
19 <div data-ng-repeat="tag in category.tags">
20 <div>
21 <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
22 {{ tag.name }}
23 </div>
24 </div>
25 <hr>
26 </div>
27 </div>
28
29 <pre>{{selected|json}}</pre>
30 <pre>{{selectedTags|json}}</pre>
31
32 </body>
33 </html>
line2 定义了AngularJS App；
line4 引入angularjs脚本；
line5 引入自己写的script2.js脚本；
line7 指定控制器AddStyleCtrl
line13-15 实时显示已选标签给用户看；
line17-line26 使用双重循环列出数据库（本例中就存储在了controller的一个对象里）中的数据；
line21的这行代码作用可大了：<input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id)">
存储了tag的id，name，利用isSelected(tag.id)来判断是否被checked，点击时候调用updateSelection($event,tag.id)方法；
如果想 ng-click 触发的函数里获取到该触发该函数的元素不能直接传入 this ，而需要传入 
。因为在
里面，这个地方的
是event。因为在Angularjs里面，这个地方的this是scope 。我们可以传入 ，然后在函数里面通过event，然后在函数里面通过event.target 来获取到该元素。
line29-30 是测试时候给自己看的，可以看到selected数组和selectedTags数组中的内容；
然后看看AngularJS代码：（script2.js）
1 /**
2 * Created by zh on 20/05/15.
3 */
4 // Code goes here
5
6 var iApp = angular.module("App", []);
7
8
9
10 iApp.controller('AddStyleCtrl', function($scope)
11 {
12 $scope.tagcategories = [
13 {
14 id: 1,
15 name: 'Color',
16 tags: [
17 {
18 id:1,
19 name:'color1'
20 },
21 {
22 id:2,
23 name:'color2'
24 },
25 {
26 id:3,
27 name:'color3'
28 },
29 {
30 id:4,
31 name:'color4'
32 },
33 ]
34 },
35 {
36 id:2,
37 name:'Cat',
38 tags:[
39 {
40 id:5,
41 name:'cat1'
42 },
43 {
44 id:6,
45 name:'cat2'
46 },
47 ]
48 },
49 {
50 id:3,
51 name:'Scenario',
52 tags:[
53 {
54 id:7,
55 name:'Home'
56 },
57 {
58 id:8,
59 name:'Work'
60 },
61 ]
62 }
63 ];
64
65 $scope.selected = [];
66 $scope.selectedTags = [];
67
68 var updateSelected = function(action,id,name){
69 if(action == 'add' && $scope.selected.indexOf(id) == -1){
70 $scope.selected.push(id);
71 $scope.selectedTags.push(name);
72 }
73 if(action == 'remove' && $scope.selected.indexOf(id)!=-1){
74 var idx = $scope.selected.indexOf(id);
75 $scope.selected.splice(idx,1);
76 $scope.selectedTags.splice(idx,1);
77 }
78 }
79
80 $scope.updateSelection = function($event, id){
81 var checkbox = $event.target;
82 var action = (checkbox.checked?'add':'remove');
83 updateSelected(action,id,checkbox.name);
84 }
85
86 $scope.isSelected = function(id){
87 return $scope.selected.indexOf(id)>=0;
88 }
89 });
line6 定义了angular app；
line10 定义了控制器AddStyleCtrl；
line12-63 定义了 标签对象
line64，66 声明了$scope中的两个数组对象（可以合并为1个），分别用来存储tag的id和name；
line68-78 定义了updateSelected方法，这个方法会被updateSelection调用；
line69-72：如果add操作且 ‘数组[id]’ 元素不存在，向数组中添加数据（id，name）；
line73-77：如果remove操作且‘数组[id]’ 元素存在，从数组中删除数据（id，name）；
line80-84定义了updateSelection方法，这个方法会在html页面的checkbox被点击时调用；
line81通过$event变量来获取点击的dom元素；
line82通过checkbox的当前状态来决定是add操作还是remove操作；
line83调用updateSelected方法，更新数据；
line86-88定义了isSelected方法，用来判断ID为id的checkbox是否被选中，然后传值给页面的ng-checked指令；
Angularjs Ng_repeat中实现复选框选中并显示不同的样式的更多相关文章
- Jquery获取当前页面中的复选框选中的内容
在使用$.post提交数据时,有一个数据是复选框获取数据,所以在当前页面获取到复选框选中的值并提交到后端卡住了一下,解决方法如下: 这两个input就是复选框的内容: str += "< ...
- asp.net，根据gridview 中checkbox复选框选中的行对数据库进行操作
在asp.net中,使用checkbox,对gridview添加复选框. 多选数据行后,根据已选数据,对原数据进行多条语句查询. string sql = "Select * from 表 ...
- Web前端之复选框选中属性
熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好 了.博主之前用户不少方法,经常Google到一些这个不好那个 ...
- QTableView中嵌入复选框CheckBox 的四种方法总结
搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...
- JS复选框选中
Web前端之复选框选中属性 熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常 ...
- python QQTableView中嵌入复选框CheckBox四种方法
搜索了一下,QTableView中嵌入复选框CheckBox方法有四种: 第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四 ...
- jQuery+SpringMVC中的复选框选择与传值
一.checkbox选择 在jQuery中,选中checkbox通用的两种方式: $("#cb1").attr("checked","checked& ...
- bootstrap table 复选框选中后，翻页不影响已选中的复选框
使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...
- js input复选框选中父级同时子级也选中
js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...
随机推荐
- php simple_html_dom
这个真的很好用,如果用正则,就太麻烦了. 首先,下载simple_html_dom,用include_once就可以使用了. 可以直接定位,可以像个对象一样操作,很方便. $ret=file_get_ ...
- Java多线程小例子(三个窗口卖火车票)
class Ticket implements Runnable{ private int TicketNum = 100; //100张火车票 private boolean flag = true ...
- Java并发--线程池的使用
在前面的文章中,我们使用线程的时候就去创建一个线程,这样实现起来非常简便,但是就会有一个问题: 如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统 ...
- bootstrap 折叠菜单
首先从 左侧的折叠菜单 开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin- ...
- {vlFeat}{matlab}{VS2010}{编译配置}
运行程序需要vlfeat与mex等在matlab与vs2010中配置,碰到了不少困难,下面给出解决方案 1.下载vlfeat,但是vlfeat目录中并没有编译好的mex文件,需要在vs2010中编译 ...
- 异常：java.lang.IllegalArgumentException: Control character in cookie value or attribute.
后台提示: 严重: Error processing requestjava.lang.IllegalArgumentException: Control character in cookie va ...
- @Autowired & @Resource 区别 & 解读@Bean
一样 Autowired & @Resource 都可以用来Bean的注入,可以写在属性(字段)上.也可以写在setter方法上 不一样 1.来源不一样 @Autowired 由Spr ...
- http链接
1,打开一个网页是多少个请求:如果是一个html页面就是一个,解析后面css,js就是很多个 一般都是多个http请求 浏览器先根据地址栏地址发送一个http请求获取html网页 然后浏览器解析ht ...
- UnicodeEncodeError: 'ascii' codec can't encode character u'\xe9' in position 7: ordinal not in range(128) [duplicate]
Python在往文件里写东西的时候,如果ascii码报错 参考 http://stackoverflow.com/questions/19833440/unicodeencodeerror-ascii ...
- OPCClient和OPCServer在Windows上运行方式的恩怨
http://www.diangon.com/wenku/PLC/201504/00021970.html 近段时间,遇到不少人都被OPCClient与OPCServer之间的通讯搞得头大,通过几次远 ...