Angularjs，对表中的选定复选框应用操作
Posted
技术标签:
【中文标题】Angularjs，对表中的选定复选框应用操作【英文标题】：Angularjs, Applying Action on Selected Checkboxes in Table 【发布时间】：2013-06-25 21:17:53 【问题描述】：我正在尝试学习 AngularJS 并实现此复选框，当我从网格中选择一些复选框并单击“删除”按钮时，应从选定的复选框中删除表中的数据。
我试过了，但不知道如何实现它。
请在 Plunker 上查看我的此代码。 http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview
如果你 fork 并给出上述 Plunker 的工作示例，那就太好了。
【问题讨论】：
【参考方案1】：一种简单的方法是将您的学生列表更改为：
$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
];
与：
<input type="checkbox" ng-model="student.selected">
在视图中。通过将filter 注入控制器，您可以将 remove 函数重写为：
$scope.remove = function()
$scope.students = filterFilter($scope.students, function (student)
return !student.selected;
);
;
这里是完整的代码：
(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>【讨论】：
Yoshi 您的解决方案似乎很完美，但最好不要将 $scope.students 分配给 remove 函数中的新值，因为这样它将从头开始重新创建所有 ng-repeat 元素，所以更好只是拼接学生数组中的元素以避免重新创建 ng-repeat。 @Ajaybeniwal 请您解释如何在其他答案中使用 Splice 执行此操作？ @Ajaybeniwal 你是对的。个人很难，我会首先等待重绘成为一个真正的问题（因为这在很大程度上取决于数据量）。在那之前，我会单独使用filter，因为它是自我描述性。
另外，随着track by的v1.2新特性，重绘所有条目的整个问题应该已经过时了。以上是关于Angularjs，对表中的选定复选框应用操作的主要内容，如果未能解决你的问题，请参考以下文章
选中复选框时在表中添加 Textfieds 使用 Jquery