我试图学习AngularJS和im实现这个复选框,当我从网格的一些复选框,然后单击删除按钮,然后数据从表应删除所选复选框.
我试过但不知道如何实现它.
请在Plunker上看到我的这段代码.
http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview
这将是很好的,如果你的叉和给上面的工作的例子.
解决方法
一个简单的方法是将您的学生列表更改为：
$scope.students = [
{Rollno: "1122",Name: "abc",Uni: "res",selected: false},{Rollno: "2233",Name: "def",Uni: "tuv",{Rollno: "3344",Name: "ghi",Uni: "wxy",selected: false}
];
有：
<input type="checkBox" ng-model="student.selected">
在视图中.通过将filter注入控制器,您可以将删除功能重写为：
$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",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>
