需求：实现点击子选项，父选项自动勾选，当子选项没有勾选，对应的父选项不勾选，并把勾选的对应的id发送出去。

效果图：

<!DOCTYPE html>

<html data-ng-app="App">

<head>

<script src='angular-1.3.0.js'></script>

<script src="script2.js"></script>

</head>

<body data-ng-controller="AddStyleCtrl">

    <div>Choose Tags</div>

    <div>

        <div>You have choosen:</div>

        <hr>

        {{selected}}

          <table  class="table table-bordered table-striped table-center" style="margin-top: 20px;">

                <tbody>

                <tr data-ng-repeat="category in tagcategories">

                    <th class="inner" style="vertical-align: middle !important;">{{category.name }}

                        <input type="checkbox" id={{category.id}} name="{{category.name}}" ng-checked="isSelected(category.id)" ng-click="updateSelection($event,category.id)">

                    </th>

                    <td>

                        <span data-ng-repeat="tag in category.tags">

                                <input type="checkbox" id={{tag.id}} name="{{tag.name}}" ng-checked="isSelected(tag.id)" ng-click="updateSelection($event,tag.id,category.id)">

                                {{ tag.name }}

                        </span>

                    </td>

                </tr>

                </tbody>

            </table>

    </div>

<pre>{{selected|json}}</pre>

</body>

</html>

script.js

    /**

     * Created by zh on 20/05/15.

     */

    // Code goes here

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

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

        $scope.tagcategories = [

            {

                id: 9,

                name: 'Color',

                tags: [

                    {

                        id:1,

                        name:'color1'

                    },

                    {

                        id:2,

                        name:'color2'

                    },

                    {

                        id:3,

                        name:'color3'

                    },

                    {

                        id:4,

                        name:'color4'

                    },

                ]

            },

            {

                id:10,

                name:'Cat',

                tags:[

                    {

                        id:5,

                        name:'cat1'

                    },

                    {

                        id:6,

                        name:'cat2'

                    },

                ]

            },

            {

                id:11,

                name:'Scenario',

                tags:[

                    {

                        id:7,

                        name:'Home'

                    },

                    {

                        id:8,

                        name:'Work'

                    },

                ]

            }

        ];

        console.log($scope.data);

        $scope.selected = [];

        var updateSelected = function(action,id){

            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.selectedTags.splice(idx,1);

            }

        }

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

            var array=[];

            var checkbox = $event.target;

            var input1=checkbox.parentNode.parentNode.parentNode.getElementsByTagName('th')[0].getElementsByTagName('input')[0];

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

            updateSelected(action,id);

            var data=$event.target.parentNode.parentNode.getElementsByTagName('input');

            angular.forEach(data,function(item,index,ary){

                if(data[index]['checked']==true){

                    array.push(data[index]);

                }

            })

            if(array.length==0){

                input1.checked=false;

                var action2 = (input1.checked?'add':'remove');

                updateSelected(action2,parseInt(input1.getAttribute('id')));

            }else{

                input1.checked=true;

                var action2 = (input1.checked?'add':'remove');

                updateSelected(action2,parseInt(input1.getAttribute('id')));

            }

        }

        $scope.isSelected = function(id){

            return $scope.selected.indexOf(id)>=0;

        }

    });

参考http://www.cnblogs.com/CheeseZH/p/4517701.html

Angular中checkbox实现复选的更多相关文章

  1. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  2. Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用

                                             Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...

  3. checkbox对齐-复选框图标

    checkbox对齐-复选框图标 一般开发过程中,我们直接使用<input type="checkbox"/>这样出现的复选框,设计师一般都说不好看 而让我们按照设计稿 ...

  4. ionic-CSS：ionic checkbox（复选框）

    ylbtech-ionic-CSS:ionic checkbox(复选框) 1.返回顶部 1. ionic checkbox(复选框) ionic 里面的 Checkbox 和普通的 Checkbox ...

  5. 在Servlet端获取html页面选中的checkbox值，request获取页面checkbox（复选框）值

    html端代码: 选项框: <input type="checkbox" name="crowd" value="选项一">选项 ...

  6. PyQt（Python+Qt）学习随笔：QTreeWidgetItem项中列的复选状态访问方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 树型部件QTreeWidget中的QTreeWidgetItem项,项中每列数据都可以单独设置复选状 ...

  7. android 中单选和复选框监听操作

    单选按钮RadioGroup.复选框CheckBox都有OnCheckedChangeListener事件,我们一起了解一下. package com.genwoxue.oncheckedchange ...

  8. dataList中实现用复选框一次删除多行问题

    先遍历每一行,判断checkBox是否选中,再获取选中行的主键Id 删除就行了 ,,,foreach(DatalistRow rowview in Datalist.Rows) //遍历Datalis ...

  9. checkbox设置复选框的只读效果不让用户勾选

    在Web开发中,有时候需要显示一些复选框(checkbox),表明这个地方是可以进行勾选操作的,但是有时候是只想告知用户"这个地方是可以进行勾选操作的"而不想让用户在此处勾选(比如 ...

随机推荐

  1. 实现BX的内容加上123 并把和送到寄存器AX

    ① 一条指令 ] ②两条指令 MOV AX,BX Tips: LEA指令与MOV指令的区别: ① MOV指令是 数据        传送指令-------传送数据 LEA指令是   有效地址 传送指令 ...

  2. layer 点击弹出图片

    今天做东西有一个功能:在列表点击图片弹出并放大显示,使用到了layer的页面层,下边是个小demo success:function (e) { var url = e.qrcode_url; //a ...

  3. tcl之控制流-条件运算、条件测试、逻辑表达

  4. php-5.6.26源代码 - opcode处理器，“乘法opcode”处理器

    // opcode处理器 - 运算符怎么执行: “*” 乘法opcode处理器 static int ZEND_FASTCALL ZEND_MUL_SPEC_CONST_CONST_HANDLER(Z ...

  5. php扩展开发-INI配置

    php.ini文件是用来保存各项扩展配置的文件,每个扩展都或多或少需要有一个定制化的配置,ini文件是一个很好的保存配置的方式,我们来看下怎么在自己的扩展里,使用到ini的配置功能 //创建ini的配 ...

  6. Spark Streaming 交互 Kafka的两种方式

    一.Spark Streaming连Kafka(重点) 方式一:Receiver方式连:走磁盘 使用High Level API(高阶API)实现Offset自动管理,灵活性差,处理数据时,如果某一时 ...

  7. 关于sql server 2008 r2 展开时报错:参数名:viewInfo ( Microsoft SqlServer Management SqlStudio Explorer )解决思路

    今天安装了sql server 2008 R2,安装成功之后我打开软件登陆都没问题,但是一展开选项就弹出错误提示框: 参数名:viewInfo 不能为空 (Microsoft SqlServer Ma ...

  8. C语言进阶——enum, sizeof, typedef 分析11

    枚举类型的使用方法: enum是C语言的 一种自定义类型 enum值是可以根据需要自定义的整型值 第一个enum的值默认为0 默认情况下的enum值是在前一个定义值的基础上加 1 enum类型的变量只 ...

  9. 15、python之导入模块

    一.什么是模块? 模块本质是一个py文件,我们可以通过关键字import将py文件对象导入到当前名称空间. 二.导入模块 1.import module 2.from module import ob ...

  10. C# WinForms跨线程更新 UI

    与在Android中一样, 子线程中更新UI被认为是线程不安全的, 会抛出异常. 子线程返回UI线程中更新UI的一个方法为: 1, 捕获应用的UI线程的上下文; 2, 定义线程任务; 3, 定义线程任 ...