【发布时间】:2015-11-22 13:25:39
【问题描述】:
您好,我尝试从表格中删除有角度的行,前 2 行背景为红色,另一行为白色。
如果我尝试删除最后一行, 它将被删除,但颜色仅适用于第一行(应该适用于第一行和第二行)
plnkr 中的示例:尝试通过单击 coulmn University 中的 x 来删除最后一行:
http://plnkr.co/edit/6td3Ywfeoe502wsQFNGO?p=preview
index.html:
<!DOCTYPE html>
<html ng-app>
<head>
<title></title>
<script src="script.js" ></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<label>Search:</label>
<input type="search" ng-model="search" placeholder="Enter to Search">
</div>
<div id="table1" ng-controller="table">
<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-class="student.color" ng-repeat="student in students | filter:search | filter:new_search">
<td>{{student.Rollno}} <input type="checkbox" ng-model="checked[$index]"> </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>
script.js:
// Code goes here
var table = function($scope)
{
$scope.students=[
{Rollno: "1122",Name: "abc",Uni: "res",color:"red"},
{Rollno: "2233",Name: "def",Uni: "tuv",color:"red"},
{Rollno: "23432",Name: "g325325hi",Uni: "wxy"},
{Rollno: "3344",Name: "ghi",Uni: "wxy"}
];
$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.checked=[];
$scope.remove=function(index){
alert($scope.checked);
$scope.students.splice(function(record){
return $scope.checked[$index];
},1);
};
};
【问题讨论】:
-
拼接不允许函数作为参数
-
在您的 plunkr 同一行
$scope.students.splice(function(record){您将 function 作为参数传递给 splice 但应该传递起始索引 -
你是问我还是建议? :-D
-
和?你看到一切正常吗? :-)
-
@Asad 也许我们不明白你想要什么。在您原来的 plunker 中,拼接并没有删除最后一个元素,而是删除了第一个元素,这就是您丢失红色行的原因。随着 Grundy 的更新和拼接的修复,最后一行确实删除了,将两行红色的行留在了顶部。我们相信这解决了您的问题。也许你应该更新你的问题并解释你真正想要什么。
标签: javascript jquery angularjs html css