Eine einfache Möglichkeit wäre, um Ihre Schüler Liste zu ändern:
$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}
];
mit:
<input type="checkbox" ng-model="student.selected">
in der Ansicht. Mit filter in die Steuerung eingespritzt wird, kann man dann schreiben die entfernen Funktion:
$scope.remove = function(){
$scope.students = filterFilter($scope.students, function (student) {
return !student.selected;
});
};
hier ist voll 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>
Yoshi Ihre Lösung scheint perfekt zu sein, aber es ist besser Ordnen Sie $ scope.students einem neuen Wert in der remove-Funktion nicht zu, da dann alle ng-repeat-Elemente von Grund auf neu erstellt werden, so dass es besser ist, nur die Elemente aus dem students-Array zu splitten, um das erneute Erzeugen von ng-repeat zu vermeiden. –
@Ajaybeniwal Bitte können Sie erklären, wie dies mit Splice in anderen Antworten zu tun? –
@Ajaybeniwal Sie haben Recht. Tough persönlich würde ich zuerst warten, bis das Redraw ein echtes Problem wird (da dies stark von der Menge der Daten abhängt). Bis dahin würde ich 'filter' für seine * Selbstbeschreibungsfähigkeit * allein verwenden. – Yoshi