/**

 * 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. PostgreSQL 的日期函数用法举例

    最近偶有开发同事咨询 PostgreSQL 日期函数,对日期处理不太熟悉,今天详细看了下手册的日期函数,整理如下,供参考. 一 取当前日期的函数 --取当前时间skytf=> select no ...

  2. 远程linux服务器mysql数据库导入和导出.sql文件

    大部分情况本地开发环境为windows,部署的服务器为Linux,本地数据库导出.sql文件后需要远程导入服务器,具体如下. 首先连接服务器,即服务器ip,协议,端口,用户名及密码,可以通过ftp客户 ...

  3. UVA1663 Purifying Machine （匈牙利算法，二分图最大匹配）

    模版集合个数减少是因为匹配串集合中没被匹配过的一对串匹配了.所以就是找一个二分图最大匹配. 因为集合X和Y是不好分开的,但是可以直接跑,两个集合都会跑一遍,所以一个匹配会被算两次,返回的时候除以2就行 ...

  4. python基础面试题整理---从零开始 每天十题（03）

    一.Q:用Python输出一个Fibonacci数列?(斐波那契额数列) A:我们先来看下代码 #!/usr/bin/env python # -*- coding: utf-8 -*- def fi ...

  5. Hibernate中get()与load()的区别，以及关于ThreadLocal的使用方法

    一.get方法和load方法的简易理解 (1)get()方法直接返回实体类,如果查不到数据则返回null.load()会返回一个实体代理对象(当前这个对象可以自动转化为实体对象),但当代理对象被调用时 ...

  6. javase(2)_递归&迭代

    一.递归  程序调用自身的编程技巧称为递归( recursion).递归做为一种算法在程序设计语言中广泛应用. 一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法,它通常把一个大型复杂的问题 ...

  7. ios软件设计中注意点

    1.取消系统自带渲染效果 2.取消屏幕旋转 3.项目中搜索丢失文件

  8. Mac电脑怎么显示隐藏文件、xcode清除缓存

    1.删除Xcode中多余的证书provisioning profile 手动删除: Xcode6 provisioning profile path: ~/Library/MobileDevice/P ...

  9. 详解Mac睡眠模式设置

    详解Mac睡眠模式设置 原文链接:http://www.insanelymac.com/forum/index.php?showtopic=281945 需要说明的是,首先这篇文章是针对已经能够成功睡 ...

  10. （47）zabbix报警媒介：Ez Texting

    Ez Texting是zabbix的技术合作伙伴,主要提供短信服务,用手机注册账号,便可以使用它来发送短信了,不过他只支持美国和加拿大的手机号码,并且应该是收费的.没有美国/加拿大手机号码的朋友请绕行 ...