需求：实现点击子选项，父选项自动勾选，当子选项没有勾选，对应的父选项不勾选，并把勾选的对应的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. uplift model学习笔记

    一.解决的问题: 通常的 Propensity Model 和 Response Model 只是给目标用户打了个分,并没有确保模型的结果可以使得活动的提升最大化:它没有告诉市场营销人员,哪个用户最有 ...

  2. sql xml扩展字段 查询语句

    [cms:sql query="SELECT ContentXML.value('/fields[1]/Address[1]','varchar(max)')AS valueForm FRO ...

  3. PHP 微信公众号真正正确的客服头像上传

    首先我们来看官方文档 这TM的搞笑呢 什么破玩意儿! 需要条件 1 需要有一个客服的账号 (废话) 2 一致jpg格式的图片(扯蛋) 完整流程 1 获取access_token 2获取账号 3 $ur ...

  4. python中的字符串内置方法小结

    #!/usr/local/bin/python3 # -*- coding:utf-8 -*- ''' name="my wife is mahongyan" ---------- ...

  5. 浏览器进程/线程模型及JS运行机制

    浏览器是多进程的,有一个主控进程,以及每一个tab页面都会新开一个进程(某些情况下多个tab会合并进程). 进程可能包括主控进程,插件进程,GPU,tab页(浏览器内核)等等. Browser进程:浏 ...

  6. 小明的存钱计划 南阳acm54

    小明的存钱计划 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 小明的零花钱一直都是自己管理.每个月的月初妈妈给小明300元钱,小明会预算这个月的花销,并且总能做到实际花 ...

  7. Git ---游离状态下的commit 分支切换与找回，commit之后无法找到历史记录

    commit之后无法找到历史记录 https://blog.csdn.net/zyb2017/article/details/78307688

  8. Leetcode 337. 打家劫舍 III

    题目链接 https://leetcode.com/problems/house-robber-iii/description/ 题目描述 在上次打劫完一条街道之后和一圈房屋后,小偷又发现了一个新的可 ...

  9. Immutable

    Immutable 参考文章 https://zhuanlan.zhihu.com/p/20295971?columnSlug=purerender

  10. Git-Git克隆

    鸡蛋不装在一个篮子里 Git的版本库目录和工作区在一起,因此存在一损俱损的问题,即如果删除一个项目的工作区,同时也会把这个项目的版本库删除掉.一个项目仅在一个工作区中维护太危险了,如果有两个工作区就会 ...