棱角分明 射流研究…判断复选框检验盒是否选中并实时显示

首先来看看简单的效果图，如下所示：

看一下超文本标记语言代码：

！DOCTYPE html html data-ng-App=' App ' head script type=' text/JavaScript ' src=' http :https://Ajax。谷歌API。com/Ajax/libs/anglarjs/1。0 .8/棱角分明。量滴js '/script脚本src=' http 3360脚本2。js '/script/head dy data-ng-controller=' AddStyleCtrl ' div选择标记/div您选择了n 3360/div定义了AngularJS应用

第四行引入angularjs脚本；

第5行引入自己写的script2.js脚本；

第七行指定控制器添加样式计算机的ctrl按键

第13-15行实时显示已选标签给用户看；

第17行-第26行使用双重循环列出数据库（本例中就存储在了控制器的一个对象里)中的数据；

第21行的这行代码作用可大了：输入类型=' checkbox ' id={ { tag . id } } name=' { { tag。name } }“ng-checked=”被选中(标记。id)' ng-click=' updateSelection($ event，tag。' id)'

存储了标签的身份证，姓名，利用isSelected(tag.id)来判断是否被检查过了，点击时候调用updateSelection($event，tag.id)方法；

如果想尼日利亚点击触发的函数里获取到该触发该函数的元素不能直接传入这个，而需要传入事件。因为在Angularjs里面，这个地方的这是事件。因为在Angularjs里面，这个地方的这是范围。我们可以传入事件，然后在函数里面通过事件，然后在函数里面通过事件。目标来获取到该元素。

第29-30行是测试时候给自己看的，可以看到挑选数组和选择的标签数组中的内容；

然后看看AngularJS代码：(script2.js)

/** *由zh于2015年5月20日创建*///代码go herevar iApp=angular。模块(' App '，[])；iApp.controller('AddStyleCtrl '，function($ scope){ $ scope。tagcategories=[{ id : 1，name: 'Color '，tag :[{ id :1，name: ' color1 ' }，{ id:2，name: ' color2 ' }，{ id 3:3，name: ' color3 ' }，{ id 3:3，name 3: '$ scope。selected=[]；$ scope。selected tags=[]；var updateSelected=function(action，id，name){ if(action==' add ' $ scope。选中。indexof(id)==-1){ $ scope。选中。push(id)；$scope.selectedTags.push(名称);} if(action==' remove ' $ scope。选中。indexof(id)！=-1){ var idx=$ scope。选中。index of(id)；$scope.selected.splice(idx，1)；$scope.selectedTags.splice(idx，1)；} } $ scope。update selection=function($ event，id){ var checkbox=$ event。目标；var动作=(复选框。是否选中？添加' : '删除');updateSelected(操作、id、复选框。姓名)；} $ scope。被选中=function(id){ return $ scope。选中。index of(id)=0；}});第6行定义了angular app

第10行定义了控制器添加样式Ctrl

第12-63行定义了标签对象

第64、66行声明了$范围中的两个数组对象（可以合并为一个),分别用来存储标签的编号和姓名；

第68-78行定义了更新选定内容方法，这个方法会被更新选择调用；

第69-72行：如果增加操作且'数组[id]'元素不存在，向数组中添加数据（身份证、姓名);

第73-77行：如果移动操作且'数组[id]'元素存在，从数组中删除数据（身份证、姓名);

第80-84行定义了updateSelection方法，当点击html页面的复选框时将调用该方法。

Line81通过$事件变量获取被点击的dom元素；

第82行通过复选框的当前状态确定是添加操作还是删除操作；

第83行调用updateSelected方法来更新数据；

第86-88行定义了isSelected方法，用于判断是否选中了带有ID的复选框，然后将该值传递给页面的ng-checked指令；

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。如有疑问，请留言交流。

作者：ZH奶酪——张赫Q Q: 1203456195电子邮件：[emailprotected]来源：http://www.cnblogs.com/CheeseZH/