gpt4 book ai didi

javascript - Angularjs,对表中的选定复选框应用操作

转载 作者:技术小花猫 更新时间:2023-10-29 12:49:18 26 4
gpt4 key购买 nike

我正在尝试学习 AngularJS 并实现此复选框,当我从网格中选择一些复选框并单击删除按钮时,表中的数据应该从选定的复选框中删除。

我试过了,但不知道如何实现它。

请在 Plunker 上查看我的这段代码。 http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview

如果您 fork 并给出上述 Plunker 的工作示例,那就太好了。

最佳答案

一个简单的方法是将您的学生列表更改为:

$scope.students = [
{Rollno: "1122",Name: "abc",Uni: "res", selected: false},
{Rollno: "2233",Name: "def",Uni: "tuv", selected: false},
{Rollno: "3344",Name: "ghi",Uni: "wxy", selected: false}
];

与:

<input type="checkbox" ng-model="student.selected">

在 View 中。随着注入(inject)filter到 Controller 中,然后您可以将 remove 函数重写为:

$scope.remove = function(){
$scope.students = filterFilter($scope.students, function (student) {
return !student.selected;
});
};

完整代码如下:

(function (app, ng) {
'use strict';

app.controller('TableCtrl', ['$scope', 'filterFilter', function($scope, filterFilter) {
$scope.students = [
{Rollno: "1122",Name: "abc",Uni: "res", selected: false},
{Rollno: "2233",Name: "def",Uni: "tuv", selected: false},
{Rollno: "3344",Name: "ghi",Uni: "wxy", selected: false}
];

$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.remove = function(){
$scope.students = filterFilter($scope.students, function (student) {
return !student.selected;
});
};
}]);
}(angular.module('app', []), angular));
/* 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;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div>
<label>Search:</label>
<input type="search" ng-model="search" placeholder="Enter to Search">
</div>

<div id="table1" ng-controller="TableCtrl">
<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-repeat="student in students | filter:search | filter:new_search">
<td>{{student.Rollno}} <input type="checkbox" ng-model="student.selected"> </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>

关于javascript - Angularjs,对表中的选定复选框应用操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17358954/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com