Hello! I am attempting to delete rows from a table in Angular. I want the first two rows to have a red background and the rest to have a white background.
If I try to delete the last row, it gets deleted but the color remains for the first row only (it should be for both the first and second rows).
Check out this example in Plnkr: try deleting the last row by clicking on the 'x' in the University column.
http://plnkr.co/edit/6td3Ywfeoe502wsQFNGO?p=preview
Here is the code in 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>
The code in script.js is as follows:
// 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);
};
};