批量删除+单个删除+全选反选
来源:互联网 发布:plsql编程入门 编辑:程序博客网 时间:2024/05/16 10:38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
商品名<input type="text" ng-model="gname"/>
单价<input type="text" ng-model="gprice"/>
数量<input type="text" ng-model="gnum"/>
<input type="button" value="添加" ng-click="add()"/>
<input type="button" value="批量删除" ng-click="piliang()"/>
<table border="1px" cellspacing="0px" cellpadding="0px">
<thead>
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"/></td>
<td>商品名</td>
<td>单价</td>
<td>数量</td>
<td>总额</td>
<td>操作</td>
</tr>
</thead>
<tr ng-repeat="g in goods">
<td><input type="checkbox" ng-click="xuanzhong($index)" ng-model="g.flag"/></td>
<td>{{g.gname}}</td>
<td>{{g.gprice}}</td>
<td>{{g.gnum}}</td>
<td>{{g.gprice*g.gnum}}</td>
<td><button ng-click="dle($index)">删除</button></td>
</tr>
</table>
<script type="text/javascript">
var mo = angular.module("myApp",[]);
mo.controller("myCtrl",function($scope){
//定义数组
$scope.goods = [{"flag":false,"gname":"足球","gprice":3,"gnum":6},
{"flag":false,"gname":"篮球","gprice":8,"gnum":3},
{"flag":false,"gname":"棒球","gprice":10,"gnum":4}];
//添加
$scope.add = function(){
//创建对象
var good = {"flag":false,"gname":$scope.gname,"gprice":$scope.gprice,"gnum":$scope.gnum};
//将对象放入数组
$scope.goods.push(good);
// $scope.goods.unshift();//向第一个位置添加
}
//根据复习框的索引,改变flag值
// $scope.xuanzhong = function($index){
// $scope.goods[$index].flag = !$scope.goods[$index].flag;
// }
//批量删除
$scope.piliang = function(){
//反着遍历
for(var i = $scope.goods.length-1;i>=0;i--){
var g = $scope.goods[i];
if(g.flag){
$scope.goods.splice(i,1);
}
}
}
//单个删除
$scope.dle=function($index){
$scope.goods.splice($index,1);
}
//单选全选
$scope.all= function (m) {
for(var i=0;i<$scope.goods.length;i++){
if(m===true){
$scope.goods[i].flag=true;
}else {
$scope.goods[i].flag=false;
}
}
};
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
商品名<input type="text" ng-model="gname"/>
单价<input type="text" ng-model="gprice"/>
数量<input type="text" ng-model="gnum"/>
<input type="button" value="添加" ng-click="add()"/>
<input type="button" value="批量删除" ng-click="piliang()"/>
<table border="1px" cellspacing="0px" cellpadding="0px">
<thead>
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="all(selectAll)"/></td>
<td>商品名</td>
<td>单价</td>
<td>数量</td>
<td>总额</td>
<td>操作</td>
</tr>
</thead>
<tr ng-repeat="g in goods">
<td><input type="checkbox" ng-click="xuanzhong($index)" ng-model="g.flag"/></td>
<td>{{g.gname}}</td>
<td>{{g.gprice}}</td>
<td>{{g.gnum}}</td>
<td>{{g.gprice*g.gnum}}</td>
<td><button ng-click="dle($index)">删除</button></td>
</tr>
</table>
<script type="text/javascript">
var mo = angular.module("myApp",[]);
mo.controller("myCtrl",function($scope){
//定义数组
$scope.goods = [{"flag":false,"gname":"足球","gprice":3,"gnum":6},
{"flag":false,"gname":"篮球","gprice":8,"gnum":3},
{"flag":false,"gname":"棒球","gprice":10,"gnum":4}];
//添加
$scope.add = function(){
//创建对象
var good = {"flag":false,"gname":$scope.gname,"gprice":$scope.gprice,"gnum":$scope.gnum};
//将对象放入数组
$scope.goods.push(good);
// $scope.goods.unshift();//向第一个位置添加
}
//根据复习框的索引,改变flag值
// $scope.xuanzhong = function($index){
// $scope.goods[$index].flag = !$scope.goods[$index].flag;
// }
//批量删除
$scope.piliang = function(){
//反着遍历
for(var i = $scope.goods.length-1;i>=0;i--){
var g = $scope.goods[i];
if(g.flag){
$scope.goods.splice(i,1);
}
}
}
//单个删除
$scope.dle=function($index){
$scope.goods.splice($index,1);
}
//单选全选
$scope.all= function (m) {
for(var i=0;i<$scope.goods.length;i++){
if(m===true){
$scope.goods[i].flag=true;
}else {
$scope.goods[i].flag=false;
}
}
};
});
</script>
</body>
</html>
阅读全文
0 0
- 批量删除+单个删除+全选反选
- 全选,反选,批量删除
- 全选、反选、批量删除
- 批量删除 全选 反选
- yii框架全选反选批量删除
- 全选,反选,批量删除,全不选,即点即改
- jq全选反选批量删除
- 全选和反选及批量删除
- JQuery全选,反选,批量删除
- jquery全选/反选/批量删除
- 全选反选和批量删除
- angular全选反选批量删除
- Angularjs 全选、反选、勾选删除、批量删除
- 全选,反选,搜索,分页,批量删除,删除
- AJAX全选、反选、全不选、删除、批量删除、即点即改
- 用户表的添加/删除/全选/反选/批量删除
- 全选,及反选,及删除全部,批量删除
- jQuery添加删除,全选反选,批量删除
- Island Perimeter:扫描二维数组,计算边长
- 关于Ext.net结合ckeditor不通过隐藏域提交编辑器内容的问题!已解决
- Blog26@linux网络端口安全 上_firewalld
- netty编解码之使用protobuf
- 微信如何分享朋友圈,php开发公众号分享到朋友圈
- 批量删除+单个删除+全选反选
- 如何不浪费青春,让游戏快速上架 Steam
- Python入门(二)——IDE选择PyCharm,输入和输出,基础规范,数据类型和变量,常量,字符串和编码,格式化
- 玩
- 在windows下安装gulp-sass时提示“Cannot read property '0' of undefined”
- 公众号开发分享给微信朋友
- 超实用总结:AI实践者需要用到的10个深度学习方法
- Keras作者François Chollet:一位“网红”科学家的自我修养
- Spring学习笔记(三)