Html Angularjs，对表中选定的复选框应用操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17358954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs, Applying Action on Selected Checkboxes in Table
提问by Sizzling Code
Im trying to Learn AngularJS and im implementing this Checkboxes that when i some checkboxes from the Grid and click the Remove Button then the Data from Table Should Be removed of Selected CheckBoxes.
我正在尝试学习 AngularJS 并且我正在实现这个复选框，当我从网格中删除一些复选框并单击删除按钮时，应从选定的复选框中删除表中的数据。
I tried but cant figure out how to implement it.
我试过了，但无法弄清楚如何实现它。
Please see my this code on Plunker. http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview
请在Plunker上查看我的这段代码。 http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview
It would be nice, if you fork and Give Working Example of the Above Plunker.
如果你分叉并给出上述Plunker的工作示例，那就太好了。
回答by Yoshi
An easy way would be to change your students list to:
一个简单的方法是将您的学生列表更改为：
$scope.students = [
{Rollno: "1122",Name: "abc",Uni: "res", selected: false},
{Rollno: "2233",Name: "def",Uni: "tuv", selected: false},
{Rollno: "3344",Name: "ghi",Uni: "wxy", selected: false}
];
with:
和：
<input type="checkbox" ng-model="student.selected">
in the view. With injecting filterinto the controller, you can then rewrite the removefunction to:
在视图中。通过注入filter控制器，您可以将删除函数重写为：
$scope.remove = function(){
$scope.students = filterFilter($scope.students, function (student) {
return !student.selected;
});
};
here is full code:
这是完整的代码：
(function (app, ng) {
'use strict';
app.controller('TableCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) {
$scope.students = [
{Rollno: "1122",Name: "abc",Uni: "res", selected: false},
{Rollno: "2233",Name: "def",Uni: "tuv", selected: false},
{Rollno: "3344",Name: "ghi",Uni: "wxy", selected: false}
];
$scope.save = function(){
$scope.students.push({
Rollno: $scope.new_rollno,
Name: $scope.new_name,
Uni: $scope.new_uni
});
$scope.new_rollno = $scope.new_name = $scope.new_uni = '';
};
$scope.remove = function(){
$scope.students = filterFilter($scope.students, function (student) {
return !student.selected;
});
};
}]);
}(angular.module('app', []), angular));/* Styles go here */
table
{
width: 100%;
}
table,th,td
{
border: 1px solid black;
}
.color
{
background-color: lightgray;
}
.color2
{
background-color: white;
}
#heading
{
background-color: black;
color: white;
}
tr:hover
{
background-color:darkblue;
color: white;
font-weight: bold;
}
#images img
{
margin-top: 10px;
}
#img1
{
width: 33.4%;
}
#img2
{
width: 66%;
height: 255px;
}
#table1
{
margin-top: 10px;
}
label
{
display: block;
margin-bottom: 5px;
margin-top: 5px;
}
button
{
margin-top: 5px;
padding: 5px;
}<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>
<label>Search:</label>
<input type="search" ng-model="search" placeholder="Enter to Search">
</div>
<div id="table1" ng-controller="TableCtrl">
<table cellpadding="0" border="0" cellspacing="0">
<tr id="heading">
<th>Roll NO:</th>
<th>Student Name:</th>
<th>University:</th>
</tr>
<tr class="color2" ng-repeat="student in students | filter:search | filter:new_search">
<td>{{student.Rollno}} <input type="checkbox" ng-model="student.selected"> </td>
<td>{{student.Name}}</td>
<td>{{student.Uni}} <button ng-click="remove($index)">x </button></td>
</tr>
</table>
<div>
<label>Rollno:</label>
<input type="number" ng-model="new_rollno"> <br>
<label>Name:</label>
<input type="text" ng-model="new_name"><br>
<label>University:</label>
<input type="text" ng-model="new_uni"><br>
<button ng-click="save()">Save</button>
</div>
<div style="float: right; margin-right: 300px;margin-top: -200px;">
<button ng-click="remove($index)">Remove</button>
</div>
</div>
</body>
</html>