/**

 * 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. _T(x) _TEXT(x) L 代表什么？

    首先  <tchar.h>中 #ifdef  _UNICODE .... #define __T(x)      L ## x  //替换 #else   /* ndef _UNICODE ...

  2. POJ 2486 Apple Tree （树形DP，树形背包）

    题意:给定一棵树图,一个人从点s出发,只能走K步,每个点都有一定数量的苹果,要求收集尽量多的苹果,输出最多苹果数. 思路: 既然是树,而且有限制k步,那么树形DP正好. 考虑1个点的情况:(1)可能在 ...

  3. （十一）maven之安装nexus私服

    安装nexus私服 前面的文章中对项目引入jar依赖包的时候,maven一般先是在本地仓库找对应版本的jar依赖包,如果在本地仓库中找不到,就上中央仓库中下载到本地仓库. 然而maven默认提供的中央 ...

  4. 自学Spring Boot

    简介: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配 ...

  5. 立个单调栈flag

    http://bestcoder.hdu.edu.cn/contests/contest_chineseproblem.php?cid=687&pid=1002

  6. python 基础之运算符

    运算符 a=10 ,b=20 运算符 描述 实例 + 加 - 两个对象相加 a + b 输出结果 30 - 减 - 得到负数或是一个数减去另一个数 a - b 输出结果 -10 * 乘 - 两个数相乘 ...

  7. python基础一 day14 复习

    迭代器和生成器迭代器:双下方法 : 很少直接调用的方法.一般情况下,是通过其他语法触发的可迭代的 —— 可迭代协议 含有__iter__的方法('__iter__' in dir(数据))可迭代的一定 ...

  8. Asp.Net Core 入门（八）—— Taghelper

    Taghelper是一个服务端的组件,可以在Razor文件中创建和渲染HTML元素,类似于我们在Asp.Net MVC中使用的Html Taghelper.Asp.Net Core MVC内置的Tag ...

  9. Open Cascade:拓扑类型(Topo_DS)之间类型转换

    TopoDS_Edge aEdge = TopoDS::Edge(myAISShape->Shape()); TopoDS_Wire S1_wire = static_cast(S1); // ...

  10. 菜鸟教你如何通俗理解——>集群、负载均衡、分布式

    在“高并发,海量数据,分布式,NoSql,云计算......”概念满天飞的年代,相信不少朋友都听说过甚至常与人提起“集群,负载均衡”等,但不是所有人都有机会真正接触到这些技术,也不是所有人都真正理解了 ...