想缓存选择按钮时，可以使用这样的方法。

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/复选框 根据缓存数据实时显示的更多相关文章

  1. AngularJS判断checkbox/复选框是否选中并实时显示

    最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: 1 <!DOCTYPE h ...

  2. ZH奶酪：AngularJS判断checkbox/复选框是否选中并实时显示

    最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...

  3. （转）AngularJS判断checkbox/复选框是否选中并实时显示

    最近做了一个选择标签的功能,把一些标签展示给用户,用户选择自己喜欢的标签,就类似我们在购物网站看到的那种过滤标签似的: 简单的效果如图所示: 首先看一下html代码: <!DOCTYPE htm ...

  4. 通过编写串口助手工具学习MFC过程——（五）添加CheckBox复选框

    通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...

  5. php获取checkbox复选框的内容

    php获取checkbox复选框的内容   由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取chec ...

  6. php怎么获取checkbox复选框的内容？

    由于checkbox属性,所有必须把checkbox复选择框的名字设置为一个如果checkbox[],php才能读取,以数据形式,否则不能正确的读取checkbox复选框的值哦. <form n ...

  7. php checkbox复选框值的获取与checkbox默认值输出方法

    php获取 checkbox复选框值的方法,checkbox在php读取值时要用数组形式哦,我们读取这些值用php post获取是以一个array形式哦. php获取 checkbox复选框值的方法 ...

  8. 转 纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  9. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

随机推荐

  1. LOJ 2483: 洛谷 P4655: 「CEOI2017」Building Bridges

    题目传送门:LOJ #2483. 题意简述: 有 \(n\) 个数,每个数有高度 \(h_i\) 和价格 \(w_i\) 两个属性. 你可以花费 \(w_i\) 的代价移除第 \(i\) 个数(不能移 ...

  2. CONFIG_DEBUG_USER【转】

    转自:https://blog.csdn.net/adaptiver/article/details/12778621 关于CONFIG_DEBUG_USER 把menuconfig中查到的 CONF ...

  3. mysql系列三、mysql开启缓存、设置缓存大小、缓存过期机制

    一.开启缓存 mysql 开启查询缓存可以有两种方法来开启一种是使用set命令来进行开启,另一种是直接修改my.ini文件来直接设置都是非常的简单的哦. 开启缓存,设置缓存大小,具体实施如下: 1.修 ...

  4. Redis消息通知（任务队列和发布订阅模式）

    Redis学习笔记(十)消息通知(任务队列和发布订阅模式) 1. 任务队列 1.1 任务队列的特点 任务队列:顾名思义,就是“传递消息的队列”.与任务队列进行交互的实体有两类,一类是生产者(produ ...

  5. Hyper-V虚拟机上安装一个图形界面的Linux系统

    这件事情呢,一直想干但又觉得太陌生和麻烦,无奈现在到了非装不可的时候,只好硬着头皮去装.在此之前,我不懂什么叫做虚拟机,linux也接触甚少.经过3天的折腾,终于装好了带有图形界面的linux(字符版 ...

  6. freeradius 错误： error:140890C7:SSL routines:ssl3_get_client_certificate:peer did not return a certificate

    在进行802.1x 测试时遇到如下问题: Waking up in 4.6 seconds.(156) Received Access-Request Id 82 from 192.168.1.126 ...

  7. nagios系列(一)centos6.5环境部署nagios服务端

    nagios软件安装包存放目录:/home/oldboy/tools nagios服务安装目录:/usr/local/nagios 1.配置yum源 echo "------ step 1: ...

  8. SYN flooding引发的网络故障

    故障现象: 1.应用无法通过外网访问,应用服务器所在的内网网段之间(web和db数据库之间访问丢包严重)不能互相访问 其他网段正常 2.怀疑是网络设备问题,将连接该网段设备的交换机重启后故障依旧,通过 ...

  9. svn使用小技巧

    在使用svn的时候,往往导入到eclipse中,使用eclipse进行提交修改,但是当删除文件夹的时候,eclipse会发生冲突,不能够提交. 使用一种方式,将svn上的项目跟你eclipse对应项目 ...

  10. Ex 6_18 硬币有限的兑换问题_第七次作业

    子问题定义: 定义一个二维数组b,其中b[i][j]表示前i个币种是否能兑换价格j,表示第i个币种的面值,第i个币种的使用有两种情况,若使用,则b[i][j]=b[i-1][j-],若不使用,则b[i ...