AngularJS 表格案例（排序，批删，查询，全选）

来源：互联网发布：算法复杂度分析例题编辑：程序博客网时间：2024/06/07 22:11

默认数据：

$scope.goods = [{
"id": 1511,
"name": "苹果4",
"user": "张三",
"tel": 1311131313,
"price": 3333,
"addr": "河北",
"date": new Date().toLocaleDateString(),
"state": false

}]

属性排序(ID)：

//id排序
var id_flag = true;
$scope.id_paixu = function() {

if(id_flag) {
$scope.goods.sort(function(a, b) {
return a.id - b.id;
})
} else {
$scope.goods.sort(function(a, b) {
return b.id - a.id
})

}

//反选
id_flag = !id_flag;

}

回车按手机查找：

$scope.cha_tel = function($event) {
//临时数组
var newGood2 = [];
var c2 = $event.keyCode;
if(c2 == 13) {
//遍历数组
for(var i = 0; i < $scope.goods.length; i++) {
//手机号是int类型所以拼接一下
if(($scope.goods[i].tel + "").indexOf($scope.good_tel) != -1) {

//添加到临时数组
newGood2.push($scope.goods[i]);
}
}

//从新给数组赋值
$scope.goods = newGood2;
}
}

完整代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

<style>
.bt1 {
background: #5CD6FF;
border: 0px;
border-radius: 7px;
}

.fie {
margin-top: 50px;
width: 800px;
height: 300px;
}

.tr1 {
text-align: center;
background: #CCCCCC;
}

.false {
background: yellow;
border: 0px;
}

.true {
background: green;
border: 0px;
}

span{
background: yellow;
border: 1px solid red;
}
</style>

</head>

<body ng-app="myApp" ng-controller="myCtrl">
<input type="button" value="新增订单" ng-click="xs()" class="bt1" />
<input type="button" value="批量删除" ng-click="shan()" class="bt1" />

<input type="text" placeholder="按商品名称查询.." ng-model="good_name" ng-keydown="cha_name($event)" />
<input type="text" placeholder="按手机号查询.." ng-model="good_tel" ng-keydown="cha_tel($event)" />

<select ng-change="isFahuo()" ng-model="fahuo" ng-init="fahuo='--按状态查询--'">
<option>--按状态查询--</option>
<option>已发货</option>
<option>未发货</option>
</select>

<table border="1px" cellspacing="0px" cellpadding="0px" width="800px" height="30px">
<tr class="tr1">
<td><input type="checkbox" ng-click="qx()" /></td>
<td>ID<input type="button" value="排序" ng-click="id_paixu()" class="bt1" /></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<input type="button" value="排序" ng-click="price_paixu()" class="bt1" /></td>
<td>城市</td>
<td>下单时间<input type="button" value="排序" ng-click="date_paixu()" class="bt1" /></td>
<td>操作</td>

</tr>
<tr ng-repeat="g in goods">
<td><input type="checkbox" name="ck1" ng-click="ck($index)" /></td>
<td>{{g.id}}</td>
<td>{{g.name}}</td>
<td>{{g.user}}</td>
<td>{{g.tel}}</td>
<td>{{g.price|currency:"￥"}}</td>
<td>{{g.addr}}</td>
<td>{{g.date}}</td>
<td><input type="button" value="{{g.state|myFilter}}" ng-click="fahuoya($index)" class="{{g.state}}" /></td>

</tr>
</table>

<fieldset class="fie" ng-show="show">
<legend>添加订单信息</legend>
商品名称：<input type="text" ng-model="name1" />
<span id="name2"></span>
<br /><br /> 用户名称：

<input type="text" ng-model="user1" />
<span id="user2"></span>
<br /><br /> 手机号：

<input type="text" ng-model="tel1" />
<span id="tel2"></span>
<br /><br /> 价格为：

<input type="text" ng-model="price1" />
<span id="price2"></span>
<br /><br /> 所在城市：

<select ng-change="isChengs()" ng-model="addr1" ng-init="chengs='--请选择--'" />
<option selected="selected">--请选择--</option>
<option>北京</option>
<option>石家庄</option>
<option>邯郸</option>
</select>
<span id="addr2"></span>
<br /><br />

<input type="button" value="保存" ng-click="add()" align="center" />
</fieldset>

<script type="text/javascript">
var mo = angular.module("myApp", [])
mo.controller("myCtrl", function($scope) {
//点开新增订单
$scope.xs = function(){
$scope.show =true;
}

//初始化数据
$scope.goods = [{
"id": 1511,
"name": "苹果4",
"user": "张三",
"tel": 1311131313,
"price": 3333,
"addr": "河北",
"date": new Date().toLocaleDateString(),
"state": false

},
{
"id": 1522,
"name": "苹果6",
"user": "李四",
"tel": 1411141414,
"price": 6666,
"addr": "石家庄",
"date": new Date().toLocaleDateString(),
"state": false
},
{
"id": 1122,
"name": "苹果X",
"user": "郭哥",
"tel": 1811181818,
"price": 8388,
"addr": "都党",
"date": new Date().toLocaleDateString(),
"state": false
},
{
"id": 1314,
"name": "苹果XS",
"user": "马仔",
"tel": 1314166666,
"price": 6666,
"addr": "石头村",
"date": new Date().toLocaleDateString(),
"state": false
},
]

//批量删除
//1.更改每行的状态
$scope.ck = function($index) {

$scope.goods[$index].state = !$scope.goods[$index].state
}
//2.反着遍历删除
$scope.shan = function() {

for(var i = $scope.goods.length - 1; i >= 0; i--) {
//如果是选择状态
if($scope.goods[i].state) {

$scope.goods.splice(i, 1);
}
}
}

//按照商品名称查询

$scope.cha_name = function($event) {
//临时数组
var newGood1 = [];
var c1 = $event.keyCode;
if(c1 == 13) {
//遍历数组
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name.indexOf($scope.good_name) != -1) {

//添加到临时数组
newGood1.push($scope.goods[i]);
}
}

//从新给数组赋值
$scope.goods = newGood1;
}
}

//按照手机查询

$scope.cha_tel = function($event) {
//临时数组
var newGood2 = [];
var c2 = $event.keyCode;
if(c2 == 13) {
//遍历数组
for(var i = 0; i < $scope.goods.length; i++) {
//手机号是int类型所以拼接一下
if(($scope.goods[i].tel + "").indexOf($scope.good_tel) != -1) {

//添加到临时数组
newGood2.push($scope.goods[i]);
}
}

//从新给数组赋值
$scope.goods = newGood2;
}
}

//id排序
var id_flag = true;
$scope.id_paixu = function() {

if(id_flag) {
$scope.goods.sort(function(a, b) {
return a.id - b.id;
})
} else {
$scope.goods.sort(function(a, b) {
return b.id - a.id
})

}

//反选
id_flag = !id_flag;

}

//价格排序
var price_flag = true;
$scope.price_paixu = function() {

if(price_flag) {

$scope.goods.sort(function(a, b) {
return a.price - b.price
})
} else {

$scope.goods.sort(function(a, b) {

return b.price - a.price
})
}

price_flag = !price_flag
}

//点击发货
$scope.fahuoya = function($index) {
$scope.goods[$index].state = true;
}

//发货未发货
$scope.isFahuo = function() {

//创建新数组
var arr_fh = [];
//获取select里面的值
var fh = $scope.fahuo;

if(fh == "已发货") {
for(var i = 0; i < $scope.goods.length; i++) {
var f1 = $scope.goods[i].state //获取发货状态
if(f1) {
arr_fh.push($scope.goods[i]);
}
}

} else {
for(var i = 0; i < $scope.goods.length; i++) {
var f1 = $scope.goods[i].state;
if(f1 == false) {

arr_fh.push($scope.goods[i]);
}
}
}

//从新赋值
$scope.goods = arr_fh;

}

var qq = true;

//添加的方法
$scope.add = function() {

var name = $scope.name1
var user = $scope.user1
var tel = $scope.tel1
var price = $scope.price1
var addr = $scope.addr1

if(name == "" || name == null) {
$("#name2").html("商品名称不能为空")
qq = false;
return
} else {
$("#name2").html("")
qq = true

}

if(user == "" || user == null) {
$("#user2").html("用户名不能为空")
qq = false;
return
} else {
$("#user2").html("")
qq = true

}

if(tel == "" || tel == null) {
$("#tel2").html("电话不能为空")
qq = false;
return
} else {
$("#user2").html("")
qq = true

}

if(price == "" || price == null) {
$("#price2").html("价格不能为空")
qq = false;
return
} else {
$("#price2").html("")
qq = true

}

if(addr == "--请选择--"||addr==""||addr==null) {
$("#addr2").html("城市不能为空")
qq = false;
return
} else {
$("#addr2").html("")
qq = true

}

if(qq) {

//创建对象
var obj = {
"id": 1555,
"name": $scope.name1,
"user": $scope.user1,
"tel": $scope.tel1,
"price": $scope.price1,
"date": new Date().toLocaleDateString(),
"addr": $scope.addr1,
"state": false
}

//添加到数组
$scope.goods.push(obj);

}

}

//全选

var flag = true;
$scope.qx = function(){
//获取属性
var ck = $("input[name=ck1]")
for (var i = 0; i < ck.length; i++) {
ck[i].checked=flag
//给每个数组中的ck赋值
$scope.goods[i].state=flag;
}

flag=!flag
}

})

//自过滤器
mo.filter("myFilter", function() {

return function(input) {
if(input) {

return "已发货";

} else {

return "未发货";
}

return input;
}

})
</script>
</body>

</html>

阅读全文

0 0