javascript - angularjs 从表格颜色中删除行打破样式-6ren

javascript - angularjs 从表格颜色中删除行打破样式

转载作者：太空宇宙更新时间：2023-11-04 02:45:53

25

4

你好，我尝试从表中删除行，前两行背景为红色，另一行背景为白色。

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

下面 plnkr 中的示例:尝试通过在 coulmn University 中单击 x 来删除最后一行:

http://plnkr.co/edit/6td3Ywfeoe502wsQFNGO?p=preview

索引.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>

脚本.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);
      };
    };

最佳答案

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

$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;
}

<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>

关于javascript - angularjs 从表格颜色中删除行打破样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33855264/

25

4

0

文章推荐： node.js - 文件上传到 S3 - 0 字节

文章推荐： c - 如果在多维数组中使用函数，则缩短

文章推荐： python - Geodjango 距离查询未检索到正确的结果

c - 打破 while 循环
这是主函数，其中还调用了 9 个函数。我将向您展示另一个函数，以便您了解我的目标是什么。 int main() { char B[rows][columns]; char answer
javascript - 打破 .preventDefault()
每当我使用 preventDefault() 时，我通常将它放在事件处理程序的顶部，如下所示: $('#foo').on('click', function(e){ e.preventDefaul
c++ - 打破 while 循环重复
我想要实现的是用户输入一个值，然后输入一个测量值。然后将其放置为最小、最大或介于两者之间。保留输入了多少个值的计数。以及以米为单位的所有值的总和。程序最初可以运行，但是当我输入换行符时，程序会重复同
php - 打破 while 循环并获取计数
我无法打破 while 循环。 "; $quizslots = mysql_query("SELECT * FROM quiz_slots WHERE `quizid`=$quizsectio
c++ - 二叉树类创建随机节点，打破
所以我将一个模板化的二叉树字典实现为一个继承自抽象字典类的类，我的添加函数有一个我无法弄清楚的问题。基本上，我的树的节点具有键和值，以及指向其父节点、左子节点和右子节点的指针。节点的代码是 stru
Jquery - 打破/防止每个循环
我的代码应该在内容之间放置一个横幅，但它正在循环播放横幅。我需要它只显示一个横幅。我试过使用 return false;，就像这个例子一样，但它没有用: $(".newsitem_text").con
ios - 打破 UINavigationController
我有一个 Storyboard指定用于登录我的应用程序。我将其嵌入到 UINavigationController 中。登录到我的应用程序(并过渡到新的 Storyboard)后，我想“脱离”这个导航
c - 打破 while 循环并重新启动代码
我想知道是否可以在不使用 MCU 复位引脚上的外部复位按钮的情况下中断 while 循环并从特定位置重新启动代码。下面是当“if”语句为真时我想中断的 while 循环，我正在使用 LCD，并想返回
javascript - 打破 map
所以我有这个问题，如果数组中的值高于输入值，它应该做一些事情然后停止循环并且不要触及数组中的剩余值。这是到目前为止的代码: const percentages = []; let enteredVal
css - 打破 flex 元素中的长词
我想在“div2”中打断长字，div2 和 div3 的宽度都不能大于父宽度(即 150px)。唯一有效的是 word-break: break-all 但这也会打断短词。 #div1{ di
sql - JOIN 打破 WHERE 子查询
我的数据库中有 3 个表。 PARENT_A 有一个“ID”主键列。 PARENT_B 有一个“ID”主键列。 CHILD 具有“PARENT_A_ID”和“PARENT_B_ID”外键列。它还有一个
javascript - 打破 PrototypeJS .each() 循环
在这个非常人为的示例中，我有一个包含 3 个元素的数组，我使用 .each() 对其进行循环。方法。 var vals = $w('foo bar baz'); vals.each( function
r - 打破 R 中的嵌套循环
非常简单的示例代码(仅用于演示，没有任何用处): repeat { while (1 > 0) { for (i in seq(1, 100)) { break # usual
javascript - 打破 promise 和异步等待的链条
我有以下 promise : var aggregatePromise = () => { return new Promise((resolve, reject) => { Ei
javascript - 打破 'enter' 键与表单提交的关联
我想检测表单的“输入”键而不让表单被提交。我如何打破这种关联？ document.forms[0].onkeypress = function (event) { e = window.eve
javascript - 打破 AJAX for 循环
这里是新手。我有一个 Ajax 函数，可以循环 3 个不同的请求。但是，如果第一个请求失败，我希望其他请求终止。我尝试放入“break”语句，但收到“非法的break语句”错误，我猜测是因为它不是直接
for-loop - 打破 Julia 中的循环
我有一个 Vector的 Vector不同长度的 s W .这些最后的向量包含 0 到 150,000 之间的整数，步长为 5，但也可以为空。我正在尝试计算每个向量的经验 cdf。我可以像这样计算这些
javascript - 打破 promise 链的好方法是什么？
我想知道如何正确地打破 JS 中的 promise 链。在这段代码中，我首先连接到数据库，然后检查集合是否已经有一些数据，如果没有则添加它们。不要关注一些 actionhero.js 代码..这里并
for-loop - 打破 Julia 中的循环
我有一个 Vector的 Vector不同长度的 s W .这些最后的向量包含 0 到 150,000 之间的整数，步长为 5，但也可以为空。我正在尝试计算每个向量的经验 cdf。我可以像这样计算这些
java - 打破 CompletableFutures 链
您可以使用 CompletableFuture 链接运行 block ，如下所示: CompletableFuture .supplyAsync(block1) .thenApply(

首页

博学

6Ren·AI

商城

javascript - angularjs 从表格颜色中删除行打破样式