需求：实现点击子选项，父选项自动勾选，当子选项没有勾选，对应的父选项不勾选，并把勾选的对应的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. Laravel系列之CMS系统学习 — 角色、权限配置【1】

    一.后台Admin模块 后台管理是有管理员的,甚至超级管理员,所以在设计数据表的时候,就会有2个方案,一个方案是共用users数据表,添加is_admin,is_superAdmin字段来进行验证,或 ...

  2. iOS-UICollectionViewController 介绍

    废话不多说,列几个列子 (几种情况下的做法): 情景一: 介绍:1. 在UIViewController 上加 UICollectionView (用代码 创建 UICollectionView). ...

  3. html_outputer.py

    coding=UTF-8 # HTML输出器 import sys class htmlOutputer(): def __init__(self): self.data = [] def colle ...

  4. HDFS HA(High Availability)高可用性

    HDFS HA(High Availability)高可用性 参考文献: 官方文档 全文翻译 Hadoop组件之-HDFS(HA实现细节) 这张图片的个人理解 由于NameNode在Hadoop1只有 ...

  5. Android 工具类 异常处理类CrashHandler

    1.整体分析 1.1.源代码如下,可以直接Copy. public class CrashHandler implements Thread.UncaughtExceptionHandler { pr ...

  6. P1875 佳佳的魔法药水

    P1875 佳佳的魔法药水 题目描述 发完了 k 张照片,佳佳却得到了一个坏消息:他的 MM 得病了!佳佳和大家一样焦急 万分!治好 MM 的病只有一种办法,那就是传说中的 0 号药水 ……怎么样才能 ...

  7. Java中的垃圾回收机制&内存管理&内存泄漏

    1. Java在创建对象时,会自动分配内存,并当该对象引用不存在的时候,释放这块内存. 为什么呢? 因为Java中使用被称为垃圾收集器的技术来监视Java程序的运行,当对象不再使用时,就自动释放对象所 ...

  8. 《1024伐木累》-BUG的通用解决办法

    本周月侠出场,一番侠骨柔情,或许你会为丽姐担忧,或许你也很想知道,发现了一个不该发现的秘密,月侠的未来究竟会怎样,但是一切都只是一个开头,伴随故事成长,伴随故事了解时事,尤其是IT圈子里的事儿,或许真 ...

  9. 程序员必需知道的Windows Shell命令

    Windows系统本来就很人性化的操作系统,操作很方便,但是对于开发人员来说,有些时候改变一些电脑配置或者执行某些任务来说,使用GUI操作反而事倍功半,因此建议使用Shell命令来提高一下工作效率. ...

  10. bat批处理 批量导出多个APK的AAPT信息(含python实现)

    产品APP因架构调整,将一个APK拆分成了十几个APK,这样每次打ROM前,都要一个个核对APK的AAPT信息 一个个APK去敲命令很繁琐,想到可以用BAT批处理调用AAPT命令一次将十几个APK的A ...