<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
angular.module("myapp", []).controller("democ", function($scope) {
$scope.ord="price";
$scope.isjia=false;
$scope.aa = [{
state:false,
name: "洋葱",
price: 2,
num: 2
}, {
state:false,
name: "大葱",
price: 4,
num: 12
}, {
state:false,
name: "胡萝卜",
price: 1,
num: 2
}, {
state:false,
name: "牛肉",
price: 50,
num: 12
}
, {
state:false,
name: "胡萝卜1",
price: 1,
num: 2
}, {
state:false,
name: "牛肉1",
price: 50,
num: 12
}];
//定义函数名,能被视图调用
$scope.save = function() {
$scope.aa.push({
name: "iPhone8x",
price: 8800
});
}
$scope.del=function(){
for(var i=0;i<$scope.aa.length;i++){
if($scope.aa[i].state){
$scope.aa.splice(i,1);
i--; //让下个值从删除的索引开始
}
}
}
//全选的操作
$scope.ckAll=function(){
for(var i in $scope.aa){
$scope.aa[i].state=$scope.ckall;
}
}
})
</script>
<style>
</style>
</head>
<body ng-app="myapp" ng-controller="democ">
<input placeholder="请输入查找的商品名称" ng-model="selname" />
<input placeholder="请输入查找的商品数量" ng-model="selnum" />
<input type="button" value="批量删除" ng-click="del()" />
<table border="1px" width="500px">
<tr>
<th><input type="checkbox" ng-model="ckall" ng-click="ckAll()" /> 全选/全不选 </th>
<th><span ng-click="ord=‘name‘;isjia=!isjia"> 商品名称 </span></th>
<th><span ng-click="ord=‘price‘;isjia=!isjia"> 商品价格</span></th>
<th><span ng-click="ord=‘num‘;isjia=!isjia">商品数量</span></th>
</tr>
<tr ng-repeat="a in aa|filter:{name:selname,num:selnum}|orderBy: ord:isjia">
<!-- 获取值 -->
<td><input type="checkbox" ng-model="a.state" /> </td>
<td>{{a.name}}</td>
<td>{{a.price}}</td>
<td>{{a.num}}</td>
</tr>
</table>
<button ng-click="save()">保存</button>
</body>
</html>
