Angularjs,在表上选择复选框应用动作 [英] Angularjs, Applying Action on Selected Checkboxes in Table
问题描述
我试着去了解AngularJS和IM实现此复选框,当我从网格一些复选框,然后单击删除按钮,然后从表中的数据,应选择复选框去除。
我试过,但无法弄清楚如何实现它。
请参阅Plunker我这个code。
<一href=\"http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=$p$pview\">http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=$p$pview
这将是很好,如果你叉,并给予工作实例。
一个简单的方法是改变你的学生名单为:
$ scope.students = [
{Rollno:,名1122:ABC,统一:资源,选择:假},
{Rollno:2233,产品名称:def,而统一:TUV,选择:假},
{Rollno:3344,产品名称:GHI,统一WXY,选择:假}
];
与
&LT;输入类型=复选框NG模型=student.selected&GT;
在视图中。与注射 过滤器
到控制器,你可以然后重写的删除的功能:
$ scope.remove =功能(){
$ scope.students = filterFilter($ scope.students,功能(学生){
返回student.selected!;
});
};
这里到处是code:
(功能(应用程序,NG){\r
使用严格的;\r
\r
app.controller('TableCtrl',['$范围,filterFilter',函数($范围,filterFilter){\r
$ scope.students = [\r
{Rollno:,名1122:ABC,统一:资源,选择:假},\r
{Rollno:2233,产品名称:def,而统一:TUV,选择:假},\r
{Rollno:3344,产品名称:GHI,统一WXY,选择:假}\r
];\r
\r
$ scope.save =功能(){\r
$ scope.students.push({\r
Rollno:$ scope.new_rollno,\r
名称:$ scope.new_name,\r
UNI:$ scope.new_uni\r
});\r
\r
$ scope.new_rollno = $ scope.new_name = $ scope.new_uni ='';\r
};\r
\r
$ scope.remove =功能(){\r
$ scope.students = filterFilter($ scope.students,功能(学生){\r
返回student.selected!;\r
});\r
};\r
}]);\r
}(angular.module(应用,[]),角));
\r
/ *样式去这里* /\r
\r
表\r
{\r
宽度:100%;\r
\r
}\r
表中,日,TD\r
{\r
边框:1px的纯黑色;\r
}\r
。颜色\r
{\r
背景颜色:浅灰色;\r
}\r
.color2\r
{\r
背景颜色:白色;\r
}\r
#标题\r
{\r
背景色:黑色;\r
颜色:白色;\r
}\r
TR:悬停\r
{\r
\r
背景色:darkblue;\r
颜色:白色;\r
字体重量:大胆的;\r
}\r
#images IMG\r
{\r
\r
的margin-top:10px的;\r
}\r
#IMG1\r
{\r
宽度:33.4%;\r
}\r
#IMG2\r
{\r
宽度:66%;\r
高度:255px;\r
}\r
#表格1\r
{\r
的margin-top:10px的;\r
}\r
标签\r
{\r
显示:块;\r
保证金底:5像素;\r
的margin-top:5像素;\r
}\r
按键\r
{\r
的margin-top:5像素;\r
填充:5像素;\r
}
\r
&LT;!DOCTYPE HTML&GT;\r
&LT; HTML NG-应用=应用程序&GT;\r
&LT; HEAD&GT;\r
&所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js&GT;&下; /脚本&GT;\r
&LT;间的charset = UTF-8 /&GT;\r
&LT;标题&GT; JS斌&LT; /标题&GT;\r
&LT; /头&GT;\r
&LT;身体GT;\r
&LT; DIV&GT;\r
&LT;标签&gt;搜索:LT; /标签&gt;\r
&LT;输入类型=搜索NG-模式=搜索占位符=输入要搜索&GT;\r
&LT; / DIV&GT;\r
\r
&LT; DIV ID =表1NG控制器=TableCtrl&GT;\r
&LT;表格的cellpadding =0边界=0CELLSPACING =0&GT;\r
&LT; TR ID =标题&GT;\r
&LT;第i辊NO:&LT; /第i\r
&LT;第i个学生姓名:&LT; /第i\r
&LT;第i大学:LT; /第i\r
&LT; / TR&GT;\r
\r
&LT; TR类=颜色2NG重复=学生的学生|过滤器:搜索|过滤器:new_search&GT;\r
&LT; TD&GT; {{student.Rollno}}&LT;输入类型=复选框NG模型=student.selected&GT; &LT; / TD&GT;\r
&所述; TD&GT; {{student.Name}}&下; / TD&GT;\r
&LT; TD&GT; {{student.Uni}}&LT;按钮NG点击=删除($指数)&GT; X&LT; /按钮&GT;&LT; / TD&GT;\r
&LT; / TR&GT;\r
&LT; /表&gt;\r
\r
&LT; DIV&GT;\r
&LT;标签&gt; Rollno:LT; /标签&gt;\r
&LT;输入类型=数字NG-模式=new_rollno&GT; &LT; BR&GT;\r
&LT;标签&gt;名称:LT; /标签&gt;\r
&LT;输入类型=文本NG模型=NEW_NAME&GT;&LT; BR&GT;\r
&LT;标签&gt;大学:LT; /标签&gt;\r
&LT;输入类型=文本NG模型=new_uni&GT;&LT; BR&GT;\r
&LT;按钮NG点击=保存()&GT;保存&LT; /按钮&GT;\r
&LT; / DIV&GT;\r
\r
&LT; DIV的风格=浮动:权利;保证金右:300像素;的margin-top:-200px;&GT;\r
&LT;按钮NG点击=删除($指数)&GT;删除&LT; /按钮&GT;\r
&LT; / DIV&GT;\r
&LT; / DIV&GT;\r
&LT; /身体GT;\r
&LT; / HTML&GT;
\r
Im trying to Learn AngularJS and im implementing this Checkboxes that when i some checkboxes from the Grid and click the Remove Button then the Data from Table Should Be removed of Selected CheckBoxes.
I tried but cant figure out how to implement it.
Please see my this code on Plunker. http://plnkr.co/edit/e7r65Me4E7OIWZ032qKM?p=preview
It would be nice, if you fork and Give Working Example of the Above Plunker.
An easy way would be to change your students list to:
$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}
];
with:
<input type="checkbox" ng-model="student.selected">
in the view. With injecting filter
into the controller, you can then rewrite the remove function to:
$scope.remove = function(){
$scope.students = filterFilter($scope.students, function (student) {
return !student.selected;
});
};
here is full code:
(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>
这篇关于Angularjs,在表上选择复选框应用动作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!