我是AngularJS的新手。我想要类似的东西：当我单击一个复选框时，它会将该复选框名称添加到div中，而当我取消选中它时，只需使用AngularJS从该位置删除该项目即可。
这就像团队球员列表，其中的球员具有复选框。当我选中一个复选框时，该播放器即被添加到列表中，而当我取消选中它时，它只会从该列表中删除。
谢谢
答案 0 :(得分：2)
使用ng-show指令。
<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>
答案 1 :(得分：1)
下面的示例代码，这是小提琴https://jsfiddle.net/eov3762d/4/
<!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>
<!-- Angular Material style sheet -->
<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+Icons" 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>
<!-- Angular Material requires Angular.js Libraries -->
<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>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<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>
答案 2 :(得分：0)
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';
}
}]);<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>
答案 3 :(得分：0)
HTML
<!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' + 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' + d.Id}}" name="selectedsubd[]" />
<label for="div{{$index}}">{{s.Description}}</label>
</li>
</ul>
</ul>
{{tradeshow.Divisions|json}}
</div>
</body>
</html>
脚本
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);
}
]);