需求：实现点击子选项，父选项自动勾选，当子选项没有勾选，对应的父选项不勾选，并把勾选的对应的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. python join() 提示UnicodeDecodeError: 'utf8' codec can't decode byte 0xcb in position 0: unexpected end of的原因及解决办法

    问题: 在使用join()将列表元素连接成字符串时出错如下 return split.join(result) UnicodeDecodeError: 'utf8' codec can't decod ...

  2. caioj:1093: 并查集2（scy的删边问题） C++

    题目描述 [题目描述] 读入一个无向图(可能含有多个连通分支),输出最多能删掉多少条边,而不改变这个图任意两点的连通性(原来连通的两个点依然连通,不连通的依然不连通). [输入格式] 第一行为图的顶点 ...

  3. <s:submit> 指定的method方法不执行

    很多文章在讲一个表单多个提交方法的时候都是在<s:submit>中通过method来指定,但是我在试验中怎么也不对,jsp页面代码如下 <%@page import="or ...

  4. Ubuntu下配置LAMP + PhpStorm

    本文仅作为一个记录,以下配置在Ubuntu 14.10 64-bit上验证通过． 安装Apache 2:sudo apt-get install apache2 安装成功能够后,通过浏览器访问loca ...

  5. [记读书笔]python3.5实现socket通讯(UDP)

    UDP连接: 无连接,从一个端向另一端发送独立的数据分组 使用UDP连接的客户-服务器程序: UDPServer.py import socket serverPort = 50009 serverS ...

  6. SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID

    如题: SDK location not found. Define location with sdk.dir in the local.properties file or with an AND ...

  7. Java-JNA使用心得

    自上个月20号,历时整整一个月,终于找到工作入职了. 然后这段时间一直看公司的框架还有业务方面的东西.其实由于给分配了一个研究Java调用C语言接口的问题,导致框架业务方面的东西还不熟,然后现在手上又 ...

  8. VSX-1 概述

    博客搁置了一段时间,一直想写,无从下手,正好最近在做VS2010扩展方面的项目,所以写VSX系列文章以记之. 背景 现有工作是做金融行业,主要项目是一套银行综合前端系统,也就是银行平时用的最多的一个系 ...

  9. Git从入门到熟练

    Git的特性 1. 分布式版本控制 集中式VS分布式 保存更新时的文件快照而非差异 (快照 :是文件系统中的概念或者技术:来自照相领域的概念,是指特定时间点的一个状态) 其他系统在每个版本中记录着各个 ...

  10. [18/12/3]蓝桥杯 练习系统 入门级别 Fibonacci数列求模问题 题解思路

    前言略. 看到这个题目本来应该很高兴的,因为什么,因为太TM的基础了啊! 可是当你用常规方法尝试提交OJ时你会发现..hhh...运行超时..(开心地摇起了呆毛 //Fibonacci数列递归一般问题 ...