AngularJS表格的增删改查和其他操作
2017-11-22 21:55
357 查看
使用AngularJS在表格中实现数据的查询,删除.修改,排序,全选,全不选.反选,和批量删除
<script type="text/javascript" src="../../angular/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.products = [{
"id": 80,
"name": "iPhone",
"price": 5400,
state: false
}, {
"id": 1200,
"name": "ipad mini",
"price": 2200,
state: false
}, {
"id": 500,
"name": "ipad air",
"price": 2340,
state: false
}, {
"id": 290,
"name": "ipad",
"price": 1420,
state: false
}, {
"id": 910,
"name": "imac",
"price": 15400,
state: false
}];
//点击列明进行排序
$scope.orderFlag = "";
$scope.orderLine = "id";
$scope.orderProduct = function(line) {
$scope.orderLine = line;
if($scope.orderFlag == "") {
$scope.orderFlag = "-";
} else {
$scope.orderFlag = "";
}
}
//下拉菜单删选商品价格、
$scope.productPrice = "--请选择--";
$scope.ifShow = function(price) {
/*console.log(price +":"+ productPrice);
return true;*/
//alert(priceMin);
if($scope.productPrice == "--请选择--") {
return true;
} else {
var arr = $scope.productPrice.split("-");
var priceMin = arr[0];
var priceMax = arr[1];
if(price < priceMin || price > priceMax) {
//alert("111");
return false;
} else {
return true;
}
}
}
//点击删除按钮，删除当前商品
$scope.delProduct = function(delName) {
//alert(delName);
for(index in $scope.products) {
//alert("删除前，角标为"+index+"长度为："+$scope.products.length);
if(delName == $scope.products[index].name) {
$scope.products.splice(index, 1);
//alert("删除后，角标为"+index+"长度为："+$scope.products.length);
} else {
}
}
}
//定义下拉菜单排序规则
$scope.selOrder;
$scope.orderSel = function() {
if($scope.selOrder == "id") {
$scope.orderFlag = "";
$scope.orderLine = "id";
} else if($scope.selOrder == "-id") {
$scope.orderFlag = "-";
$scope.orderLine = "id";
} else if($scope.selOrder == "price") {
$scope.orderFlag = "";
$scope.orderLine = "price";
} else if($scope.selOrder == "-price") {
$scope.orderFlag = "-";
$scope.orderLine = "price";
};
}
//定义修改价格
/*$scope.updatePrice = function(index){
//获得价格
var price = $scope.products[index].price;
var result = window.prompt("清输入要修改的价格",price);
alert(result);
}*/
$scope.updatePrice = function(price) {
//获得价格
for(index in $scope.products) {
//alert("删除前，角标为"+index+"长度为："+$scope.products.length);
if(price == $scope.products[index].price) {
//$scope.products.splice(index, 1);
//alert("删除后，角标为"+index+"长度为："+$scope.products.length);
//修改价格
var result = parseInt(window.prompt("清输入要修改的价格", price));
//在这之前对result的结果进行非字符串判断
if(result < 0) {
alert("输入有误，请重新更改");
} else {
if(window.confirm("确定要将" + $scope.products[index].name + "的价格更改为：" + result + "吗？")) {
$scope.products[index].price = result;
};
}
} else {
}
}
}
//全选、全不选
$scope.selectAll = false;
$scope.selectAllFun = function() {
if($scope.selectAll) {
for(index in $scope.products) {
$scope.products[index].state = true;
}
} else {
for(index in $scope.products) {
$scope.products[index].state = false;
}
}
}
//反选
$scope.checkSelecetAll = function() {
var flag = false;
//遍历数组，获得对象的状态
for(index in $scope.products) {
//alert($scope.products[index].state);
//如果有一个对象状态是false即未选中状态，就把标志位flag变为true。
if(!$scope.products[index].state){
flag = true;
}
}
//判断是否没有一个是未选中状态
if(flag){//这是正面至少有一个未选中
$scope.selectAll = false;//全选状态为false
}else{//一定是全部被选中
$scope.selectAll = true;//全选状态为true
}
}
//批量删除
$scope.delSelect = function(){
//自己添加选中状态判断，就是有没有一个都没选中的情况。
//定义一个空数组，盛放状态是选中的对象
var isSelected = [];
//遍历数组，通过数组对象的状态，判断是否删除当前遍历的对象
for(index in $scope.products) {
//如果遍历的当前对象状态为true，则删除
if($scope.products[index].state){
//把当前选中的对象，一个个追加到isSelected数组中。
isSelected.push($scope.products[index]);
//alert(isSelected.length);
}
}
//遍历isSelected数组，因为isSelected数组中存放的是所有选中项的对象。
for(index in isSelected){
var name = isSelected[index].name;
for(index2 in $scope.products){
if(name == $scope.products[index2].name){
$scope.products.splice(index2,1);
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
<input type="text" size="10" placeholder="产品名称" ng-model="search" /> 产品价格
<select ng-model="productPrice">
<option>--请选择--</option>
<option>0-2000</option>
<option>2001-3000</option>
<option>3001-4000</option>
<option>4001-5000</option>
<option>5001-6000</option>
<option>6001-7000</option>
<option>7001-8000</option>
<option>8001-无穷大</option>
</select>
<select ng-model="selOrder" ng-change="orderSel()">
<option value="">排序方式</option>
<option value="id">id正序</option>
<option value="-id">id逆序</option>
<option value="price">价格正序</option>
<option value="-price">价格逆序</option>
</select>
<button ng-click="delSelect()">批量删除</button>
<br /><br />
<table border="1px solid blue" cellpadding="10" cellspacing="0">
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
<th ng-click="orderProduct('id')">产品编号</th>
<th ng-click="orderProduct('name')">产品名称</th>
<th ng-click="orderProduct('price')">产品价格</th>
<th>操作</th>
</tr>
<!--<tr ng-repeat="sz in products | filter:{'name':search} | orderBy:(orderFlag+orderLine) | orderBy:selOrder" ng-if="ifShow(sz.price)">-->
<tr ng-repeat="sz in products | filter:{'name':search} | orderBy:(orderFlag+orderLine)" ng-if="ifShow(sz.price)">
<td><input type="checkbox" ng-model="sz.state" ng-click="checkSelecetAll()" /> </td>
<td>{{sz.id}}</td>
<td>{{sz.name}}</td>
<td>{{sz.price}}</td>
<td>
<button ng-click="delProduct(sz.name)">删除</button>
<button ng-click="updatePrice(sz.price)">修改</button>
</td>
</tr>
</table>
</center>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript对数据表格的增删改查操作详解
- angularjs中对表格数据进行增删改查操作详细
- 一个表格教你完成MySQL的增删改查操作
- AngularJS（基本使用）动态添加表格数据（增删改查）
- AngularJS对表格的增删改查(仅限前端)
- MYSQL增删改查和其他常见操作
- AngularJS操作表格的增删改查
- AngularJS实现表格的增删改查（仅限前端）
- angularjs的表格的增删改查（关于商品）
- GridView的常用操作（增删改查）
- 基于Java对象的数据库增删改查操作
- MySQL---操作数据表基本操作（增删改查）
- java代码LDAP操作（增删改查）AD（活动目录）- 添加
- spring4和quartz2.x整合,对任务做动态操作(增删改查)
- 使用存储过程操作数据库(实现增删改查)
- python中操作mysql数据库CRUD（增删改查）
- IOS9中联系人对象的使用及增删改查操作的函数封装
- 在struts1中使用DispatchAction对应多个ActionForm，实现写一个Action实现增删改查操作---一个Action处理多个操作的能力
- CoreData的简单使用<一、CoreData数据库表的建立以及增删改查操作>
- Linq 数据库操作（增删改查）