如何在选中复选框时将元素添加到div，以及如何在未选中复选框时删除元素。谢谢你
如何在选中复选框时将元素添加到div，以及如何在未选中复选框时删除元素。谢谢你
提问于 2018-08-17 14:28:40
我是AngularJS的新手。我想要类似这样的东西:当我单击一个复选框时，它会将该复选框名称添加到一个div中，当我取消选中它时，它会简单地使用AngularJS从那里删除该项。
这就像一个带有复选框的团队成员列表。当我选中一个复选框时，该玩家被添加到列表中，当我取消选中时，它将从该列表中删除。
谢谢
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-08-18 02:42:08
使用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>
Stack Overflow用户
发布于 2018-08-17 14:39:33
下面是示例代码，这里是fiddle 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>Stack Overflow用户
发布于 2018-08-18 15:29:01
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51889556
复制相关文章
相似问题