/**

 * 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. 刷新本地DNS缓存的方法

    http://www.cnblogs.com/rubylouvre/archive/2012/08/31/2665859.html 常有人问到域名解析了不是即时生效的嘛,怎么还是原来的呢?答案就是在本 ...

  2. License开源许可协议

    开源许可协议 License是软件的授权许可,表述了你获得代码后拥有的权利,可以对别人的作品进行何种操作,何种操作又是被禁止的. 开源许可证种类 Open Source Initiative http ...

  3. Error:(3, 32) java: 程序包org.springframework.boot不存在

     解决方案一: 找同事传一份D:\maven_repository\org\springframework\boot  ,如图所示的位置,添加进去立刻就不报红.我也可以给你发....  解决方案二: ...

  4. （五）VMware Harbor 部署之SSL

    转自:https://www.cnblogs.com/Rcsec/p/8479728.html 1 .签名证书与自签名证书 签名证书:由权威颁发机构颁发给服务器或者个人用于证明自己身份的东西. 自签名 ...

  5. Centos7 安装python3.5.3

    使用root用户安装:切换到root用户 su 回车,然后输入密码,切换到root用户. 新建一个脚本,如installPython.sh #!/bin/bash yum -y install zli ...

  6. python_111_异常处理

    #1 name=['a','s'] try: print(name[3]) except: print('list index out of range')#list index out of ran ...

  7. 换个语言学一下 Golang （1）

    做技术的总是有些拗.这么多年一直在.net的框框里打转转.直到现在市场上.net工作越来越难找,项目越来越老才发现不做出改变不行了.就从学习Go开始吧. Go语言的特点 简洁.快速.安全 并行.有趣. ...

  8. （1）JSTL的13个core标签库

     标准标签库JSTL的全名为:Java Server Pages Standard Tag Library. (jsp  standard tag library) JSTL主要提供了5大类标签库: ...

  9. thinkphp 结合phpexcel实现excel导入

    控制器文件: class ExcelAction extends Action { public function __construct() { import('ORG.Util.ExcelToAr ...

  10. shell脚本，awk合并一列的问题。

    文件 file2内容如下:0 qwert1 asdfghjk2 asdjkl2 zxcvbn3 dfghjkll4 222224 tyuiop4 bnm 让第一列相等的合并成一行,不要第一列,也就是变 ...