angular删除数据+模糊查询,排序
2017-10-19 19:30
447 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="angular-1.3.0.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.col="bh";
$scope.desc=0;
$scope.shuzu=[
{ done:false,
"bh":1,
"Name":"小米MAX",
"money":2000,
"kc":100
},
{ done:false,
"bh":2,
"Name":"vivox9",
"money":2500,
"kc":200
},
{ done:false,
"bh":3,
"Name":"iphone8",
"money":8000,
"kc":400
},
{ done:false,
"bh":4,
"Name":"iphonex",
"money":9000,
"kc":300
},
{
done:false,
"bh":5,
"Name":"华为",
"money":3000,
"kc":150
}
]
//删除单个的
$scope.delete=function ($index) {
if($index>=0){
$scope.shuzu.splice($index,1);
}
};
//全部删除
$scope.delete1=function ($index) {
if($scope.shuzu.length>=0){
$scope.shuzu.splice($index);
}
};
//删除选中的
$scope.delete1=function () {
for(var i=0;i<$scope.shuzu.length;i++)
{
if($scope.shuzu[i].done==true)
{
$scope.shuzu.splice(i,1);
i--;
}
}
}
//点击全选
$scope.checkAll=function () {
for(var i=0;i<$scope.shuzu.length;i++)
{
if($scope.chec==true)
{
$scope.shuzu[i].done=true;
}
else{
$scope.shuzu[i].done=false;
}
}
$scope.num=0;
for(var i=0;i<$scope.data.length;i++)
{
if($scope.shuzu[i].done==true)
{
$scope.num+=$scope.shuzu[i].price*$scope.shuzu[i].count;
}
}
}
});
</script>
<script>
function myfuntion() {
alert("您确认删除吗?")
}
</script>
<title>Title</title>
</head>
<body ng-app="myApp">
<h2>商品库存信息管理</h2>
<table ng-controller="myCtrl" border="1" cellspacing="0" cellpadding="0" width="600px">
<tr>
<td colspan="5"><input type="text" value="" placeholder="请输入关键字" ng-model="search"></td>
<td><button style="background-color: red;color: white" ng-click="delete1($index)" onclck="myfuntion()">批量删除</button></td>
</tr>
<tr>
<td><input type="checkbox" ng-click="checkAll()" ng-model="chec"></span></td>
<td ng-click="col='bh';desc!=desc">商品编号</td>
<td ng-click="col='Name';desc!=desc"><a>商品名称</a></td>
<td ng-click="col='money';desc!=desc">商品价格</td>
<td ng-click="col='kc';desc!=desc">商品库存</td>
<td ng-click="col='Handle';desc!=desc">商品操作</td>
</tr>
<tr ng-repeat="x in shuzu|filter:{'Name':search}|orderBy:col:desc">
<td><input type="checkbox" ng-model="x.done" ng-click="counts()"></td>
<td>{{x.bh}}</td>
<td>{{x.Name}}</td>
<td>{{x.money|currency:'¥'}}</td>
<td>{{x.kc}}</td>
<td><button style="background-color: sandybrown;color: white" ng-click="delete($index)" onclick="myfuntion()">删除</button></td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="angular-1.3.0.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.col="bh";
$scope.desc=0;
$scope.shuzu=[
{ done:false,
"bh":1,
"Name":"小米MAX",
"money":2000,
"kc":100
},
{ done:false,
"bh":2,
"Name":"vivox9",
"money":2500,
"kc":200
},
{ done:false,
"bh":3,
"Name":"iphone8",
"money":8000,
"kc":400
},
{ done:false,
"bh":4,
"Name":"iphonex",
"money":9000,
"kc":300
},
{
done:false,
"bh":5,
"Name":"华为",
"money":3000,
"kc":150
}
]
//删除单个的
$scope.delete=function ($index) {
if($index>=0){
$scope.shuzu.splice($index,1);
}
};
//全部删除
$scope.delete1=function ($index) {
if($scope.shuzu.length>=0){
$scope.shuzu.splice($index);
}
};
//删除选中的
$scope.delete1=function () {
for(var i=0;i<$scope.shuzu.length;i++)
{
if($scope.shuzu[i].done==true)
{
$scope.shuzu.splice(i,1);
i--;
}
}
}
//点击全选
$scope.checkAll=function () {
for(var i=0;i<$scope.shuzu.length;i++)
{
if($scope.chec==true)
{
$scope.shuzu[i].done=true;
}
else{
$scope.shuzu[i].done=false;
}
}
$scope.num=0;
for(var i=0;i<$scope.data.length;i++)
{
if($scope.shuzu[i].done==true)
{
$scope.num+=$scope.shuzu[i].price*$scope.shuzu[i].count;
}
}
}
});
</script>
<script>
function myfuntion() {
alert("您确认删除吗?")
}
</script>
<title>Title</title>
</head>
<body ng-app="myApp">
<h2>商品库存信息管理</h2>
<table ng-controller="myCtrl" border="1" cellspacing="0" cellpadding="0" width="600px">
<tr>
<td colspan="5"><input type="text" value="" placeholder="请输入关键字" ng-model="search"></td>
<td><button style="background-color: red;color: white" ng-click="delete1($index)" onclck="myfuntion()">批量删除</button></td>
</tr>
<tr>
<td><input type="checkbox" ng-click="checkAll()" ng-model="chec"></span></td>
<td ng-click="col='bh';desc!=desc">商品编号</td>
<td ng-click="col='Name';desc!=desc"><a>商品名称</a></td>
<td ng-click="col='money';desc!=desc">商品价格</td>
<td ng-click="col='kc';desc!=desc">商品库存</td>
<td ng-click="col='Handle';desc!=desc">商品操作</td>
</tr>
<tr ng-repeat="x in shuzu|filter:{'Name':search}|orderBy:col:desc">
<td><input type="checkbox" ng-model="x.done" ng-click="counts()"></td>
<td>{{x.bh}}</td>
<td>{{x.Name}}</td>
<td>{{x.money|currency:'¥'}}</td>
<td>{{x.kc}}</td>
<td><button style="background-color: sandybrown;color: white" ng-click="delete($index)" onclick="myfuntion()">删除</button></td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 安卓SQLite 根据某一字段查询一条数据 根据某一字段排序 添加 修改 删除某一字段等于某某的那一条数据
- 用户名查询、手机号查询、选择城市、选择状态、选择月份、ID排序、添加数据、批量发货、批量删除、敏感字、修改数据）
- 2.数据检索|模糊查询|数据排序|数据分组| 常见问题0726
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- 地址邮编, 用CoreData实现插入/删除/查询(包含结果排序,模糊查询)
- 订单用户表1（用户查询 、手机号查询 、选择城市 、选择状态、月份查询 、ID排序 、添加数据、批量发货、批量删除）
- 购物车angularJS删除和模糊查询还有排序
- 购物车排序、批量删除、查询（死数据）
- 数据的查询、模糊查询、新建、修改、删除
- Linq排序、分组、模糊查询、调用外部方法、直接执行SQL语句、事务、修改数据
- angular实现添加,删除,查询,排序
- AngularJS实现购物车模糊查询,价格区间查找,根据名字删除,点击排序
- AngularJs+JQuery：模糊查询过滤内容，下拉菜单排序，过滤敏感字符，验证判断后添加表格信息
- 用户表（查询数据 、添加数据 、排序 、点击删除 、修改密码 、批量删除 、全部删除）
- 商品订单（增删改查）：新增订单；批量删除，发货；模糊查询，下拉菜单内容过滤（含时间）；全选反选，列名排序
- Angular,添加,删除,查询,排序
- angular 请求网络数据 展示table 查询关键字 过滤 删除 添加 修改
- AngularJS 添加 查询 排序 删除 数据 敏感词
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- 简单排序，单一删除，隔行换色，模糊查询，添加用户