Một cách dễ dàng sẽ được thay đổi danh sách sinh viên của bạn để:
$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}
];
với:
<input type="checkbox" ng-model="student.selected">
trong giao diện. Với tiêm filter vào bộ điều khiển, sau đó bạn có thể viết lại các chức năng remove tới:
$scope.remove = function(){
$scope.students = filterFilter($scope.students, function (student) {
return !student.selected;
});
};
đây là mã đầy đủ:
(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 giải pháp của bạn có vẻ là hoàn hảo nhưng nó là tốt hơn không gán $ scope.students cho một giá trị mới trong hàm remove vì sau đó nó sẽ tạo lại tất cả các phần tử ng-repeat từ đầu vì vậy tốt hơn là chỉ ghép các phần tử từ mảng sinh viên để tránh tái tạo lại tất cả các lần lặp lại. –
@Ajaybeniwal Xin bạn có thể giải thích Làm thế nào để làm điều này với Splice trong câu trả lời khác? –
@Ajaybeniwal Bạn nói đúng. Tough cá nhân tôi lần đầu tiên sẽ chờ cho vẽ lại để trở thành một vấn đề thực sự (vì điều này phụ thuộc rất nhiều vào số lượng dữ liệu). Cho đến lúc đó, tôi sẽ sử dụng 'filter' cho nó * self-descriptiveness * một mình. – Yoshi