entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://jsfiddle.net/eov3762d/4/|blocks|key|cibmt|text|下面是示例代码，这里是fiddle+https://jsfiddle.net/eov3762d/4/|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|4od2t|+<!DOCTYPE+html>
<html+lang="en">
++++<head>
++++++++<meta+charset="UTF-8">
++++++++<meta+name="description"+content="">
++++++++<meta+name="keywords"+content="">
++++++++<meta+name="author"+content="">
++++++++<meta+name="viewport"+content="width=device-width,+initial-scale=1.0">
++++++++<meta+http-equiv="X-UA-Compatible"+content="ie=edge">
++++++++<title>checkbox</title>
++++++++
++++++++<link+rel="stylesheet"+href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
++++++++<link+href="https://fonts.googleapis.com/icon?family=Material%2BIcons"+rel="stylesheet">
++++</head>
++++<body+ng-app="BlankApp"+ng-cloak+ng-controller="CheckboxController">
++++++++<md-content>
++++++++++++<div+layout="column">
++++++++++++++++<div+layout="row"+layout-wrap+class="epg-checkbox-group"+ng-repeat="filterDatas+in+filterData"+ng-init="outerIndex=$index">
++++++++++++++++++++<md-subheader+class="md-primary"+flex="100">{{filterDatas.title}}</md-subheader>
++++++++++++++++++++<div+flex="50"+class="epg-checkbox"+ng-repeat="lists+in+filterDatas.list+"+ng-init="innerIndex=$index">
++++++++++++++++++++++++<md-checkbox+aria-label="checkbox"+ng-model="lists.checked"+ng-change="doSomething(lists,lists.checked,lists.listTitle,innerIndex)"+ng-hide=lists.removedchecked>{{lists.listTitle}}</md-checkbox+>
++++++++++++++++++++</div>
++++++++++++++++++++<md-button+ng-click="clickButton(brands)"+class="md-raised+md-primary"+ng-disabled="isDisabled">Apply</md-button>
++++++++++++++++</div>
++++++++++++++++<div+ng-if="selectedAlarms"+layout="row"+layout-wrap>
++++++++++++++++++++<md-subheader+class="md-primary">Selected</md-subheader>
++++++++++++++++++++<div+layout="row"+layout-wrap+flex="100"+class="epg-checkbox-group+p-b16"+ng-repeat="filterDatas+in+filterData"+ng-init="outerIndex1=$index">
++++++++++++++++++++++++<div+flex="50"+ng-if="lists.removed"+class="epg-checkbox"+ng-repeat="lists+in+filterDatas.list"+ng-init="innerIndex1=$index">
++++++++++++++++++++++++++++<md-checkbox+aria-label="checkbox"+ng-model="lists.checked"+ng-change="removefromlist(lists,lists.checked,lists.listTitle,innerIndex1)"+ng-hide=lists.removedchecked1>{{lists.listTitle}}</md-checkbox>
++++++++++++++++++++++++</div>
++++++++++++++++++++</div>
++++++++++++++++</div>
++++++++++++</div>
++++++++</md-content>
++++++++
++++++++<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
++++++++<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
++++++++<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
++++++++<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
++++++++<script+src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
++++++++
++++++++<script+src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
++++++++
++++++++<script+type="text/javascript">++++
++++++++++++/**
++++++++++++*+You+must+include+the+dependency+on+'ngMaterial'+
++++++++++++*/
++++++++++++angular.module('BlankApp',+['ngMaterial'])
++++++++++++.config(['$mdThemingProvider',+function($mdThemingProvider)+{
++++++++++++++++'use+strict';
++++++++++++++++$mdThemingProvider.theme('default')
++++++++++++++++.primaryPalette('blue');
++++++++++++}])

++++++++++++.controller('CheckboxController',+['$scope','$filter',function($scope,+$filter)+{
++++++++++++++++$scope.filterData+=+[
++++++++++++++++++++{
++++++++++++++++++++++++id:+1,
++++++++++++++++++++++++title:+"Attribute+Type",
++++++++++++++++++++++++list:+[
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++"listTitle":+"Attribute+1",
++++++++++++++++++++++++++++++++++++"checked":+false,
++++++++++++++++++++++++++++++++},+
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++"listTitle":+"Attribute+2",
++++++++++++++++++++++++++++++++++++"checked":+false,
++++++++++++++++++++++++++++++++},+
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++"listTitle":+"Attribute+3",
++++++++++++++++++++++++++++++++++++"checked":+false,
++++++++++++++++++++++++++++++++},+
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++"listTitle":+"Attribute+4",
++++++++++++++++++++++++++++++++++++"checked":+false,
++++++++++++++++++++++++++++++++},+
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++"listTitle":+"Attribute+5",
++++++++++++++++++++++++++++++++++++"checked":+false,
++++++++++++++++++++++++++++++++},+
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++"listTitle":+"Attribute+6",
++++++++++++++++++++++++++++++++++++"checked":+false,
++++++++++++++++++++++++++++++++},+
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++"listTitle":+"Attribute+7",
++++++++++++++++++++++++++++++++++++"checked":+false,
++++++++++++++++++++++++++++++++},+
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++"listTitle":+"Attribute+8",
++++++++++++++++++++++++++++++++++++"checked":+false,
++++++++++++++++++++++++++++++++},+
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++"listTitle":+"Attribute+9",
++++++++++++++++++++++++++++++++++++"checked":+false,
++++++++++++++++++++++++++++++++},+
++++++++++++++++++++++++++++++++{
++++++++++++++++++++++++++++++++++++"listTitle":+"Attribute+10",
++++++++++++++++++++++++++++++++++++"checked":+false,
++++++++++++++++++++++++++++++++}
++++++++++++++++++++++++++++]
++++++++++++++++++++}
++++++++++++++++]
++++++++++++++++$scope.isDisabled+=+true;
++++++++++++++++$scope.$watch('filterData[0].list',+function(newval,+oldval)+{
++++++++++++++++++++if+(newval+!==+oldval)+{
+++++++++++++++++++++$scope.brands+=+[];
++++++++++++++++++++$scope.isDisabled+=+false;
++++++++++++++++++++angular.forEach($filter('filter')(newval,+{checked:true}),+function(lists)+{
++++++++++++++++++++++++$scope.brands.push(lists.listTitle);
++++++++++++++++++++});+++++
++++++++++++++++++++}
++++++++++++++++},+true);

++++++++++++++++$scope.doSomething+=+function(list,bool,name,index)+{
++++++++++++++++++$scope.ind=index;
++++++++++++++++++if(!bool){
+++++++++++++++++++$scope.filterData[0].list[index].removedchecked=true;
+++++++++++++++++++$scope.filterData[0].list[index].removed=true;
++++++++++++++++++}
++++++++++++++++}
+++++++++++++++++$scope.removefromlist+=+function(list,bool,name,index)+{

++++++++++++++++++if(!bool){
+++++++++++++++++++$scope.filterData[0].list[index].removedchecked1=true;
+++++++++++++++++++$scope.filterData[0].list[index].removedchecked=false;
++++++++++++++++++}
++++++++++++++++}

++++++++++++++++$scope.clickButton+=+function(brands)+{
++++++++++++++++++console.log($scope.innerIndex)
++++++++++++++++++++$scope.selectedAlarms+=+brands;
++++++++++++++++++++$scope.filterData[0].list[$scope.ind].removed=true;
++++++++++++++++++++$scope.filterData[0].list[$scope.ind].removedchecked1=false;
++++++++++++++++++++$scope.filterData[0].list[$scope.ind].removedchecked=true;
++++++++++++++++++++console.log(`Selected+Alarms+=+${$scope.selectedAlarms}`);
++++++++++++++++}
++++++++++++}]);
++++++++</script>
++++</body>
</html>|code-block|syntax|javascript|afdhk^0|I|W|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|Q|G|@]|H|@$I|R|J|S|A|T]]|6|$]]|$A|K|C|L|2|M|F|U|G|@]|H|@]|6|$N|O]]|$A|P|C|-4|2|E|F|V|G|@]|H|@]|6|$]]]]

<p>Sample code below and here is the fiddle <a href="https://jsfiddle.net/eov3762d/4/" rel="nofollow noreferrer">https://jsfiddle.net/eov3762d/4/</a></p>

<pre><code> &lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="description" content=""&gt;
        &lt;meta name="keywords" content=""&gt;
        &lt;meta name="author" content=""&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
        &lt;title&gt;checkbox&lt;/title&gt;
        &lt;!-- Angular Material style sheet --&gt;
        &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css"&gt;
        &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body ng-app="BlankApp" ng-cloak ng-controller="CheckboxController"&gt;
        &lt;md-content&gt;
            &lt;div layout="column"&gt;
                &lt;div layout="row" layout-wrap class="epg-checkbox-group" ng-repeat="filterDatas in filterData" ng-init="outerIndex=$index"&gt;
                    &lt;md-subheader class="md-primary" flex="100"&gt;{{filterDatas.title}}&lt;/md-subheader&gt;
                    &lt;div flex="50" class="epg-checkbox" ng-repeat="lists in filterDatas.list " ng-init="innerIndex=$index"&gt;
                        &lt;md-checkbox aria-label="checkbox" ng-model="lists.checked" ng-change="doSomething(lists,lists.checked,lists.listTitle,innerIndex)" ng-hide=lists.removedchecked&gt;{{lists.listTitle}}&lt;/md-checkbox &gt;
                    &lt;/div&gt;
                    &lt;md-button ng-click="clickButton(brands)" class="md-raised md-primary" ng-disabled="isDisabled"&gt;Apply&lt;/md-button&gt;
                &lt;/div&gt;
                &lt;div ng-if="selectedAlarms" layout="row" layout-wrap&gt;
                    &lt;md-subheader class="md-primary"&gt;Selected&lt;/md-subheader&gt;
                    &lt;div layout="row" layout-wrap flex="100" class="epg-checkbox-group p-b16" ng-repeat="filterDatas in filterData" ng-init="outerIndex1=$index"&gt;
                        &lt;div flex="50" ng-if="lists.removed" class="epg-checkbox" ng-repeat="lists in filterDatas.list" ng-init="innerIndex1=$index"&gt;
                            &lt;md-checkbox aria-label="checkbox" ng-model="lists.checked" ng-change="removefromlist(lists,lists.checked,lists.listTitle,innerIndex1)" ng-hide=lists.removedchecked1&gt;{{lists.listTitle}}&lt;/md-checkbox&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/md-content&gt;
        &lt;!-- Angular Material requires Angular.js Libraries --&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"&gt;&lt;/script&gt;
        &lt;!-- Angular Material Library --&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"&gt;&lt;/script&gt;
        &lt;!-- Your application bootstrap  --&gt;
        &lt;script type="text/javascript"&gt;    
            /**
            * You must include the dependency on 'ngMaterial' 
            */
            angular.module('BlankApp', ['ngMaterial'])
            .config(['$mdThemingProvider', function($mdThemingProvider) {
                'use strict';
                $mdThemingProvider.theme('default')
                .primaryPalette('blue');
            }])

            .controller('CheckboxController', ['$scope','$filter',function($scope, $filter) {
                $scope.filterData = [
                    {
                        id: 1,
                        title: "Attribute Type",
                        list: [
                                {
                                    "listTitle": "Attribute 1",
                                    "checked": false,
                                }, 
                                {
                                    "listTitle": "Attribute 2",
                                    "checked": false,
                                }, 
                                {
                                    "listTitle": "Attribute 3",
                                    "checked": false,
                                }, 
                                {
                                    "listTitle": "Attribute 4",
                                    "checked": false,
                                }, 
                                {
                                    "listTitle": "Attribute 5",
                                    "checked": false,
                                }, 
                                {
                                    "listTitle": "Attribute 6",
                                    "checked": false,
                                }, 
                                {
                                    "listTitle": "Attribute 7",
                                    "checked": false,
                                }, 
                                {
                                    "listTitle": "Attribute 8",
                                    "checked": false,
                                }, 
                                {
                                    "listTitle": "Attribute 9",
                                    "checked": false,
                                }, 
                                {
                                    "listTitle": "Attribute 10",
                                    "checked": false,
                                }
                            ]
                    }
                ]
                $scope.isDisabled = true;
                $scope.$watch('filterData[0].list', function(newval, oldval) {
                    if (newval !== oldval) {
                     $scope.brands = [];
                    $scope.isDisabled = false;
                    angular.forEach($filter('filter')(newval, {checked:true}), function(lists) {
                        $scope.brands.push(lists.listTitle);
                    });     
                    }
                }, true);

                $scope.doSomething = function(list,bool,name,index) {
                  $scope.ind=index;
                  if(!bool){
                   $scope.filterData[0].list[index].removedchecked=true;
                   $scope.filterData[0].list[index].removed=true;
                  }
                }
                 $scope.removefromlist = function(list,bool,name,index) {

                  if(!bool){
                   $scope.filterData[0].list[index].removedchecked1=true;
                   $scope.filterData[0].list[index].removedchecked=false;
                  }
                }

                $scope.clickButton = function(brands) {
                  console.log($scope.innerIndex)
                    $scope.selectedAlarms = brands;
                    $scope.filterData[0].list[$scope.ind].removed=true;
                    $scope.filterData[0].list[$scope.ind].removedchecked1=false;
                    $scope.filterData[0].list[$scope.ind].removedchecked=true;
                    console.log(`Selected Alarms = ${$scope.selectedAlarms}`);
                }
            }]);
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


entityMap|blocks|key|s6nt|text|使用ng-show指令。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|43d7j|​|dv0hd|<script+src="//unpkg.com/angular/angular.js"></script>
<body+ng-app>
+++<input+type="checkbox"+ng-model="showDiv">Show+div<br+/>
+++<div+ng-show="showDiv">
+++++++This+is+hidden+when+the+box+is+unchecked
+++</div>
</body>|code-block|syntax|javascript|fimpr|97fg3^0|2|7|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@$A|Q|B|R|C|D]]|E|@]|F|$]]|$2|G|4|H|6|7|8|S|9|@]|E|@]|F|$]]|$2|I|4|J|6|K|8|T|9|@]|E|@]|F|$L|M]]|$2|N|4|H|6|7|8|U|9|@]|E|@]|F|$]]|$2|O|4|-4|6|7|8|V|9|@]|E|@]|F|$]]]]

<p>Use the <code>ng-show</code> directive.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//unpkg.com/angular/angular.js"&gt;&lt;/script&gt;
&lt;body ng-app&gt;
   &lt;input type="checkbox" ng-model="showDiv"&gt;Show div&lt;br /&gt;
   &lt;div ng-show="showDiv"&gt;
       This is hidden when the box is unchecked
   &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


entityMap|blocks|key|k8ei|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|alit4|+var+myApp+=+angular.module('myApp',+[]);

++++myApp.controller('myController',+['$scope',+function+($scope)+{
++++++++$scope.addTeam+=+function+(list)+{
++++++++++++var+books+=+[];
++++++++++++angular.forEach(list,+function+(value,+key)+{
++++++++++++++++if+(list[key].selected+==+list[key].name)+{
++++++++++++++++++++books.push(list[key].selected);
++++++++++++++++}
++++++++++++});
++++++++++++//+SHOW+THE+SELECTED+ITEMS+IN+THE+EXPRESSION.
			if+(books.length+>+0)
++++++++++++++++$scope.the_list+=+books.toString();
++++++++++++else
++++++++++++++++$scope.the_list+=+'Please+choose+a+player';
++++++++}
++++}]);|code-block|syntax|javascript|9td1g|<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div+class="container">
			<div+class="row">
				<div+class="col-md-6+col-md-offset-3">
					<h2+class="text-primary">Player+options</h2>
					<div+class="text-primary"+ng-app="myApp"+ng-controller="myController"
					ng-init="list=[
					{+name:'Player+1'+},+
					{+name:'Player+2'},+
					{+name:'Player+3'+},+
					{+name:'Player+4'+},+
					{+name:'Player+5'+}]">
						<div+ng-repeat="books+in+list">
						<input+type="checkbox"+ng-model="books.selected"
						ng-true-value="'{{books.name}}'"+ng-false-value="''"
						id="'{{books.name}}'"+ng-change="addTeam(list);"/>
						{{+books.name+}}
						</div>
					<h2>Team</h2>
					<h3>Selected+Players</h3>
					<div+class="text-primary">{{the_list}}</div>
					</div>
				</div>
			</div>
		</div>|29id2|c027g^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|E|8|N|9|@]|A|@]|B|$F|G]]|$2|J|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|K|4|-4|6|7|8|P|9|@]|A|@]|B|$]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> var myApp = angular.module('myApp', []);

    myApp.controller('myController', ['$scope', function ($scope) {
        $scope.addTeam = function (list) {
            var books = [];
            angular.forEach(list, function (value, key) {
                if (list[key].selected == list[key].name) {
                    books.push(list[key].selected);
                }
            });
            // SHOW THE SELECTED ITEMS IN THE EXPRESSION.
			if (books.length &gt; 0)
                $scope.the_list = books.toString();
            else
                $scope.the_list = 'Please choose a player';
        }
    }]);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="container"&gt;
			&lt;div class="row"&gt;
				&lt;div class="col-md-6 col-md-offset-3"&gt;
					&lt;h2 class="text-primary"&gt;Player options&lt;/h2&gt;
					&lt;div class="text-primary" ng-app="myApp" ng-controller="myController"
					ng-init="list=[
					{ name:'Player 1' }, 
					{ name:'Player 2'}, 
					{ name:'Player 3' }, 
					{ name:'Player 4' }, 
					{ name:'Player 5' }]"&gt;
						&lt;div ng-repeat="books in list"&gt;
						&lt;input type="checkbox" ng-model="books.selected"
						ng-true-value="'{{books.name}}'" ng-false-value="''"
						id="'{{books.name}}'" ng-change="addTeam(list);"/&gt;
						{{ books.name }}
						&lt;/div&gt;
					&lt;h2&gt;Team&lt;/h2&gt;
					&lt;h3&gt;Selected Players&lt;/h3&gt;
					&lt;div class="text-primary"&gt;{{the_list}}&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;</code></pre>
</div>
</div>
</p>


entityMap|0|type|LINK|mutability|MUTABLE|data|url|http://embed.plnkr.co/hjb5HTITyJelqdjLN5h2/|blocks|key|enlok|text|plunk|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|7nle1|HTML|7hmku|++++<!DOCTYPE+html>
++++<html+ng-app="testApp">
++++++<head>
++++++++<script+data-require="angular.js@*"+data-semver="1.3.0-beta.5"+src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
++++++++<link+rel="stylesheet"+href="style.css"+/>
++++++++<script+src="script.js"></script>
++++++</head>
++++++<body+ng-controller="test">
++++++++<label>Divisions+Participating*</label>
++++++++<div+class="radio-check-wrap">
++++++++++<ul+class="radio-check-group">
++++++++++++<li+ng-repeat="d+in+divisions">
++++++++++++++<input+type="checkbox"+ng-model="d.selected"+class=""+id="{{'div'+%2B+d.Id}}"+name="selectedDivisions[]"+/>
++++++++++++++<label+for="div{{$index}}">{{d.Description}}</label>
++++++++++++</li>
++++++++++++<ul>
++++++++++++++<li+ng-repeat="s+in+d.subd">
++++++++++++++++<input+type="checkbox"+ng-model="s.selected"+class=""+id="{{'div'+%2B+d.Id}}"+name="selectedsubd[]"+/>
++++++++++++++++<label+for="div{{$index}}">{{s.Description}}</label>
++++++++++++++</li>
++++++++++++</ul>
++++++++++</ul>
++++++++++{{tradeshow.Divisions%7Cjson}}
++++++++</div>
++++++</body>
++++</html>|code-block|syntax|javascript|9h5bc|脚本|3cd8f|++var+testApp+=+angular.module('testApp',+[])
++.controller('test',+['$scope',+'filterFilter',+
++++function($scope,+filterFilter)+{
++++++$scope.divisions+=+[
++++++++{+Description:+'test1',+Id:+1+},
++++++++{+Description:+'test2',+Id:+2+},
++++++++{+Description:+'test3',+Id:+3+},
++++++++{+Description:+'test4',+Id:+4+},
++++++++{+Description:+'test5',+Id:+5+}
++++++];

++++++++$scope.subd+=+[
++++++++{+Description:+'sub1',+Id:+7+},
++++++++{+Description:+'sub2',+Id:+8+},
++++++++{+Description:+'sub3',+Id:+9+}
++++++];

++++++$scope.tradeshow+=+{+};
++++++$scope.tradeshow.Divisions+=+[];

++++++//+helper+method
++++++$scope.selectedDivisions+=+function+selectedDivisions()+{
++++++++return+filterFilter($scope.tradeshow.Divisions,+{+selected:+true+});
++++++};

++++++//+watch+divisions+for+changes
++++++$scope.$watch('divisions%7Cfilter:{selected:true}',+function+(nv)+{
++++++++$scope.tradeshow.Divisions+=+nv.map(function+(division)+{
++++++++++return+{Id:+division.Id};
++++++++});
++++++},+true);
++++}
++]);|frv3a^0|0|5|0|0|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|W|G|@]|H|@$I|X|J|Y|A|Z]]|6|$]]|$A|K|C|L|2|E|F|10|G|@]|H|@]|6|$]]|$A|M|C|N|2|O|F|11|G|@]|H|@]|6|$P|Q]]|$A|R|C|S|2|E|F|12|G|@]|H|@]|6|$]]|$A|T|C|U|2|O|F|13|G|@]|H|@]|6|$P|Q]]|$A|V|C|-4|2|E|F|14|G|@]|H|@]|6|$]]]]

<p><a href="http://embed.plnkr.co/hjb5HTITyJelqdjLN5h2/" rel="nofollow noreferrer">plunk</a></p>

<p>HTML</p>

<pre><code>    &lt;!DOCTYPE html&gt;
    &lt;html ng-app="testApp"&gt;
      &lt;head&gt;
        &lt;script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" href="style.css" /&gt;
        &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-controller="test"&gt;
        &lt;label&gt;Divisions Participating*&lt;/label&gt;
        &lt;div class="radio-check-wrap"&gt;
          &lt;ul class="radio-check-group"&gt;
            &lt;li ng-repeat="d in divisions"&gt;
              &lt;input type="checkbox" ng-model="d.selected" class="" id="{{'div' + d.Id}}" name="selectedDivisions[]" /&gt;
              &lt;label for="div{{$index}}"&gt;{{d.Description}}&lt;/label&gt;
            &lt;/li&gt;
            &lt;ul&gt;
              &lt;li ng-repeat="s in d.subd"&gt;
                &lt;input type="checkbox" ng-model="s.selected" class="" id="{{'div' + d.Id}}" name="selectedsubd[]" /&gt;
                &lt;label for="div{{$index}}"&gt;{{s.Description}}&lt;/label&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/ul&gt;
          {{tradeshow.Divisions|json}}
        &lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>Script</p>

<pre><code>  var testApp = angular.module('testApp', [])
  .controller('test', ['$scope', 'filterFilter', 
    function($scope, filterFilter) {
      $scope.divisions = [
        { Description: 'test1', Id: 1 },
        { Description: 'test2', Id: 2 },
        { Description: 'test3', Id: 3 },
        { Description: 'test4', Id: 4 },
        { Description: 'test5', Id: 5 }
      ];

        $scope.subd = [
        { Description: 'sub1', Id: 7 },
        { Description: 'sub2', Id: 8 },
        { Description: 'sub3', Id: 9 }
      ];

      $scope.tradeshow = { };
      $scope.tradeshow.Divisions = [];

      // helper method
      $scope.selectedDivisions = function selectedDivisions() {
        return filterFilter($scope.tradeshow.Divisions, { selected: true });
      };

      // watch divisions for changes
      $scope.$watch('divisions|filter:{selected:true}', function (nv) {
        $scope.tradeshow.Divisions = nv.map(function (division) {
          return {Id: division.Id};
        });
      }, true);
    }
  ]);
</code></pre>


<p>I am new to AngularJS. I want something like: when I click a checkbox it adds that checkbox name to a div and when I uncheck it, it simply remove that item from there using AngularJS.</p>

<p>It is like a team player list with players having checkboxes. As I check a checkbox that player is added to the list and when I un-check it simply removes from that list.</p>

<p>Thanks</p>


how to add an element to a div when checkbox is checked, and remove when checkbox is unchecked. Thank you

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我是AngularJS的新手。我想要类似这样的东西:当我单击一个复选框时，它会将该复选框名称添加到一个div中，当我取消选中它时，它会简单地使用AngularJS从那里删除该项。 这就像一个带有复选框的团队成员列表。当我选中一个复选框时，该玩家被添加到列表中，当我取消选中时，它将从该列表中删除。 谢谢 

问如何在选中复选框时将元素添加到div，以及如何在未选中复选框时删除元素。谢谢你
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在选中复选框时将元素添加到div，以及如何在未选中复选框时删除元素。谢谢你EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在选中复选框时将元素添加到div，以及如何在未选中复选框时删除元素。谢谢你
EN