0

hello i try to delete row from table in angular the first 2 rows with background red,and the other with white.

if i try to delete the last row , it will be delete but color will be for the first row only (it should be for both first and second rows)

example below in plnkr : try to delete the last row by click in x in coulmn University:

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);
      };
    };
Asad
  • 67
  • 1
  • 1
  • 9
  • splice does not allow function as parameter – Grundy Nov 22 '15 at 13:45
  • you can look at example in plnkr link,it work without problems, i did it without function with parmeter ,and get the same result , the problem is when delete row for example the last row the style behavior is wrong – Asad Nov 22 '15 at 13:48
  • 1
    in your plunkr same line `$scope.students.splice(function(record){` you pass _function_ as parameter to _splice_ but should pass start index – Grundy Nov 22 '15 at 13:49
  • you can do somthing like that $scope.remove=function(index){ alert($scope.checked); $scope.students.splice(index,1); }; even with this it will not work – Asad Nov 22 '15 at 13:51
  • 1
    do you ask me or suggest it? :-D – Grundy Nov 22 '15 at 13:52
  • code has been changed , $scope.remove=function(index){ alert($scope.checked); $scope.students.splice(index,1); }; no i still got the problem even with this change the problem is not with the using – Asad Nov 22 '15 at 13:53
  • 1
    and? do you see that all work correctly? :-) – Grundy Nov 22 '15 at 13:53
  • @Grundy you should answer so I can upvote you. :) – Dave Nov 22 '15 at 13:54
  • what you see in the code that not working ? give me the answer maybe i wrong i still got the problem when try to delete last row , style will be breaked – Asad Nov 22 '15 at 13:55
  • 1
    @Asad perhaps we don't understand what you want. In your original plunker the splice wasn't deleting the last element, it was deleting the first one, which is why you lost your red row. With the update from Grundy and the fix to splice, the last row does delete properly leaving the two red rows at the top. Which we believe addressed your issue. Perhaps you should update your question and explain what you actually want. – Dave Nov 22 '15 at 14:03
  • Thanks Runesun , maybe i was not clear im sorry about that, code was updated, i face exactly the problem it delete the correct row ,but i lost the red – Asad Nov 22 '15 at 14:07
  • @Asad, what you mean _i lost the red_? if you not delete _red_ row, you not lost it – Grundy Nov 22 '15 at 14:09
  • @Asad do you mean when you delete one of the first two rows the red goes away and you always want the first two rows to be red? That's because only your first two pieces of data (one which you deleted) have the value of red. If you always want the first two rows to be red change your ng-class to "$index < 2 ? 'red' : 'color2'" and remove color from your data as it's a front end concern not a data one. – Dave Nov 22 '15 at 14:15
  • no @Runesun anyway it not reproduced i will attach my code later anyway i will attach my code later thanks for helping – Asad Nov 22 '15 at 14:19

1 Answers1

2

Main problem in code: first parameter for splice - should be start index, but you try pass function. If use passed index all work fine

$scope.students.splice(index,1);

In snippet, you can see that even when you delete last row - all work

angular.module('app', [])
  .controller('tableCtrl', ['$scope',
    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) {
        $scope.students.splice(index, 1);
      };
    }
  ])
/* 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;
}
.red {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="tableCtrl">
  <div>
    <label>Search:</label>
    <input type="search" ng-model="search" placeholder="Enter to Search">
  </div>
  <div id="table1">
    <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;">


    </div>
  </div>
</div>
Grundy
  • 13,356
  • 3
  • 35
  • 55
  • thanks @Grundy this is the right scenario , but it still reprduce in my local app , i tried to builed somthing equal , i will attach my code later ,thanks for helping – Asad Nov 22 '15 at 14:20
  • @Asad, **note:** i use latest angular version, `1.4.7` and in your sample you use `1.1.5`. – Grundy Nov 22 '15 at 14:36
  • thanks @Grundy and Runesun the problem was when i delete i was deleted the wrong index because of orderby i solved the problem with this link : http://stackoverflow.com/questions/16118762/angularjs-wrong-index-after-orderby the problem that i has described wrong scenario im sorry about that and thanks alot for helping – Asad Nov 22 '15 at 14:45