Javascript angularjs从表中删除行颜色打断样式_Javascript_Jquery_Angularjs_Html_Css

Javascript angularjs从表中删除行颜色打断样式

javascript jquery angularjs html css

Javascript angularjs从表中删除行颜色打断样式,javascript,jquery,angularjs,html,css,Javascript,Jquery,Angularjs,Html,Css,您好，我尝试从表中删除前两行背景为红色，另一行背景为白色的行如果我试图删除最后一行，它将被删除，但颜色仅适用于第一行（第一行和第二行都应使用） plnkr中的以下示例：在coulmn University中，通过单击x尝试删除最后一行： index.html： <!DOCTYPE html> <html ng-app> <head> <title></title> <script src="script.js

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

如果我试图删除最后一行，它将被删除，但颜色仅适用于第一行（第一行和第二行都应使用）

plnkr中的以下示例：在coulmn University中，通过单击x尝试删除最后一行：

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>

代码中的主要问题：的第一个参数应该是start index，但您尝试使用pass函数。如果使用通过的索引，所有工作正常

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

在代码段中，即使删除最后一行，您也可以看到—所有工作

angular.module（'app'，[]）
.controller（'tableCtrl'，['$scope'，'，
职能（$范围）{
$scope.students=[{
罗尔诺：“1122”，
名称：“abc”，
Uni：“res”，
颜色：“红色”
}, {
罗尔诺：“2233”，
名称：“def”，
大学：“tuv”，
颜色：“红色”
}, {
罗尔诺：“23432”，
名称：“g325325hi”，
Uni：“wxy”
}, {
罗尔诺：“3344”，
名称：“ghi”，
Uni：“wxy”
}];
$scope.save=函数（）{
$scope.students.push({
Rollno:$scope.new\u Rollno，
名称：$scope.new_名称，
Uni:$scope.new\u Uni
});
$scope.new_rollno=“”；
$scope.new_name=“”；
$scope.new_uni=“”
};
$scope.checked=[]；
$scope.remove=函数（索引）{
$scope.students.splice（索引1）；
};
}
])

/*样式在这里*/
桌子{
宽度：100%；
}
桌子
th，
运输署{
边框：1px纯黑；
}
.颜色{
背景颜色：浅灰色；
}
.color2{
背景色：白色；
}
#标题{
背景色：黑色；
颜色：白色；
}
tr：悬停{
背景色：深蓝色；
颜色：白色；
字体大小：粗体；
}
#图像img{
边缘顶部：10px；
}
#img1{
宽度：33.4%；
}
#img2{
宽度：66%；
高度：255px；
}
#表1{
边缘顶部：10px；
}
标签{
显示：块；
边缘底部：5px；
边缘顶部：5px；
}
钮扣{
边缘顶部：5px；
填充物：5px；
}
瑞德先生{
背景色：红色；
}


搜索：
卷号：
学生姓名：
大学：
{{student.Rollno}
{{student.Name}
{{student.Uni}}
x
罗尔诺：


姓名：


大学：


拯救

splice不允许函数作为参数在您的plunkr同一行中

$scope.students.splice（函数（记录）{

您将函数作为参数传递给splice，但应传递起始索引您是否询问或建议它？：-Dand？您是否看到所有操作都正确？：-）@另外，我们可能不明白您想要什么。在您最初的plunker中，拼接不是删除最后一个元素，而是删除第一个元素，这就是您丢失红色行的原因。随着Grundy的更新和拼接的修复，最后一行确实正确删除，将两个红色行保留在顶部。我们认为这解决了您的问题。也许你应该更新你的问题并解释你真正想要什么。谢谢@Grundy这是正确的场景，但它仍然在我的本地应用程序中出现，我尝试构建一些相同的东西，我稍后会附加我的代码，谢谢helping@Asad，注意：我使用的是最新的angular版本，

1.4.7

，在您的示例中使用的是

1.1.5

谢谢@Grundy和Runesun问题是当我删除时，我被删除了错误的索引，因为orderby我用这个链接解决了问题：我描述了错误场景的问题，对此我很抱歉，非常感谢您的帮助

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