angularjs从表格中删除行打破了样式

时间:2015-11-22 13:25:40

标签: javascript jquery angularjs html5 css3

你好我试图从前面的两个行中删除背景为红色的行,而另一个用白色删除。

如果我尝试删除最后一行, 它将被删除,但颜色仅适用于第一行(它应该是第一行和第二行)

pnkr下面的示例:尝试在coulmn大学中单击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);
      };
    };

1 个答案:

答案 0 :(得分:2)

代码中的主要问题:https://poi.apache.org/apidocs/org/apache/poi/xssf/usermodel/XSSFSheet.html#validateSheetPassword(java.lang.String)的第一个参数 - 应该是开始索引,但是你尝试传递函数。如果使用传递索引,则一切正常

if (sheet.validateSheetPassword("password"))
    print("It same password");

在代码段中,您甚至可以看到删除最后一行 - 所有工作

$scope.students.splice(index,1);
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;
}