【问题标题】:angularjs delete row from table color break the styleangularjs从表格中删除行颜色破坏样式
【发布时间】: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


【解决方案1】:

代码中的主要问题:splice 的第一个参数 - 应该是起始索引,但您尝试传递函数。如果使用通过 index 一切正常

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

在 sn-p 中,您可以看到即使您删除了最后一行 - 一切正常

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,这是正确的场景,但它仍然在我的本地应用程序中重现,我尝试构建相同的东西,稍后我将附上我的代码,感谢您的帮助
  • @Asad,注意: 我使用最新的 Angular 版本,1.4.7,在您的示例中,您使用 1.1.5
  • 感谢@Grundy 和 Runesun 问题是当我删除时我被删除了错误的索引,因为 orderby 我解决了这个链接的问题:stackoverflow.com/questions/16118762/… 我描述错误场景的问题我很抱歉非常感谢您的帮助
猜你喜欢
  • 2010-10-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-07-26
  • 1970-01-01
  • 2021-01-23
  • 2019-11-23
  • 1970-01-01
相关资源
最近更新 更多