/**

 * Created by zh on 20/05/15.

 */

// Code goes here

var iApp = angular.module("App", []);

iApp.controller('AddStyleCtrl', function($scope)

{

    $scope.tagcategories = [

        {

            id: 1,

            name: 'Color',

            tags: [

                {

                    id:1,

                    name:'color1'

                },

                {

                    id:2,

                    name:'color2'

                },

                {

                    id:3,

                    name:'color3'

                },

                {

                    id:4,

                    name:'color4'

                },

            ]

        },

        {

            id:2,

            name:'Cat',

            tags:[

                {

                    id:5,

                    name:'cat1'

                },

                {

                    id:6,

                    name:'cat2'

                },

            ]

        },

        {

            id:3,

            name:'Scenario',

            tags:[

                {

                    id:7,

                    name:'Home'

                },

                {

                    id:8,

                    name:'Work'

                },

            ]

        }

    ];

//用于存储选中的值

    $scope.selected = [];

    $scope.selectedTags = [];

//更新事件

    var updateSelected = function(action,id,name){

        if(action == 'add' && $scope.selected.indexOf(id) == -1){

            $scope.selected.push(id);

            $scope.selectedTags.push(name);

        }

        if(action == 'remove' && $scope.selected.indexOf(id)!=-1){

            var idx = $scope.selected.indexOf(id);

            $scope.selected.splice(idx,1);

            $scope.selectedTags.splice(idx,1);

        }

    }

//用于监控点击事件，checkbox选择了就更新

    $scope.updateSelection = function($event, id){

        var checkbox = $event.target;

        var action = (checkbox.checked?'add':'remove');

        updateSelected(action,id,checkbox.name);

    }

//判断存储的变量中是否已包含该checkbox,$scope.selected.indexOf(id)>=0是个布尔值
$scope.isSelected = function(id){ return $scope.selected.indexOf(id)>=0; } });
<!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>
　　　　　　　　　　　 <!--根据ng-repeat生成一些button-->

                    <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>

　　出处： http://www.cnblogs.com/CheeseZH/

angular实时显示checkbox被选中的元素的更多相关文章

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

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

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

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

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

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

  4. AngularJS checkbox/复选框 根据缓存数据实时显示

    想缓存选择按钮时,可以使用这样的方法. index.html <!DOCTYPE html> <html data-ng-app="App"> <he ...

  5. 使用Uploadify实现上传图片生成缩略图例子,实时显示进度条

    不了解Uploadify的,先看看前一篇详细说明 http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html Uploadify ...

  6. layui 数据表格+分页+搜索+checkbox+缓存选中项数据

    在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索,  还有checkbox,  支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...

  7. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  8. 基于Jquery插件Uploadify实现实时显示进度条上传图片

    网址:http://www.jb51.net/article/83811.htm     这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们 ...

  9. WinForm控件TreeView 只部分节点显示 CheckBox

    WinForm控件TreeView 只部分节点显示  CheckBox 用过asp.net的应该知道,要在treeview中实现上述功能可以使用ShowCheckBox 属性指定那些节点显示check ...

随机推荐

  1. eclipse报错MA

    今天有个总监晒了张tomcat7.0崩溃忘记怎么搞了,大家都在吐槽"一个[总监](经常水群)竟然不会这个".敲上来. Problem Occurred系列: 'Starting T ...

  2. A*算法研究

    许多工业与科学计算问题都可以转化为在图中寻路问题.启发式的寻路方法将问题表示为一个图,然后利用问题本身的信息,来加速解的搜索过程.一个典型的例子是有一些通路连接若干城市,找出从指定起点城市到指定终点城 ...

  3. 图片，二进制，oracle数据库

    图片在oracle数据库中一般以二进制存在,存储类型是blob,然而clob类型一般存储的是大于4000的字符,不能用来存储图像这样的二进制内容,下面展示一下实现图像,二进制,oracle 数据库的应 ...

  4. OpenRead方法打开文件并读取

    实现效果: 知识运用: File类的OpenRead方法 //实现打开现有文件以进行读取 public static FileStream OpenRead(string path) FileStre ...

  5. NoSuchBeanDefinitionException: No qualifying bean of type 'com.bj186.ssm.mapper.EmployeeMapper' available: expected at least 1 bean which qualifies as autowire candidate

    在搭建SSM spring springmvc  mybatis整合的时候, 遇到了这个问题 说说我的问题吧!我在进行单元测试的时候,出现了这个错误,网上一查才知道是,配置文件中没有写扫描包信息.一看 ...

  6. 浮动清楚浮动及position的用法

    float 在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止 ...

  7. MySQL查询当天数据以及大量查询时提升速度

    select * from 表名 where to_days(字段名) = to_days(now()) 一.数据库设计方面1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 ord ...

  8. laydate控件后台返回的时间前台格式化

    //功能:laydate控件后台返回的时间前台格式化 //参数:laydate控件值 function formatDate(strTime) { if ("" === strTi ...

  9. House of Spirit(fastbin)

    0x01 fastbin fastbin所包含chunk的大小为16 Bytes, 24 Bytes, 32 Bytes, … , 80 Bytes.当分配一块较小的内存(mem<=64 Byt ...

  10. struts2的动态方法配置

    动态方法调用配置 <package name="test" extends="struts-default"> <aciton name=&q ...