//在 js文件夹 里添加 angular.min 的包
<!DOCTYPE html>
<html ng-app="App"><head>
<meta charset="UTF-8">
<title></title>
<style>
.css1{
background-color: red;
}
.css2{
background-color: blue;
}
</style>
</head>
<body ng-controller="Democtrl">
<div>
<input type="text" placeholder="请输入查询的商品" ng-model="search"/>
数量排序:
<select ng-model="numsBy">
<option value="numss">数量正序</option>
<option value="-numss">数量倒序</option>
</select>
<button ng-click="deleteAll()">批量删除</button>
</div>
<table border="2">
<tr>
<td><input type="checkbox" ng-click="selectAll()"/></td>
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in Product | filter:{name:search} | orderBy:numsBy" class="{{$even ? 'css1':'css2'}}">
<td><input type="checkbox" ng-model="x.state"/></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="number" ng-model="x.numss">
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.price*x.numss}}</td>
<td>
<button ng-click="remove($index)">删除</button>
</td>
<td>
<button ng-click="xiugai($index)">修改</button>
</td>
</tr>
</table>
<div>
<span>总价</span>
<span>{{totalPrices()}}</span>
<span>数量</span>
<span>{{numAll()}}</span>
<button ng-click="removeAll()">清空</button>
</div>
<form style="border: 1px solid yellow; width: 260px;">
商品编号:<input type="text" ng-model="ID"/><br />
商品名称:<input type="text" ng-model="IDname"/><br />
商品数量:<input type="number" ng-model="IDnum"/><br />
商品单价:<input type="text" ng-model="IDprice"/><br />
<button ng-click="add333()">添加</button>
</form>
<form style="border: solid black; width: 300px;" ng-show="updateShow">
商品编号:<input type="text" ng-model="updateId"/><br />
商品名称:<input type="text" ng-model="updateName"/><br />
商品数量:<input type="num" ng-model="updateNum"/><br />
商品编号:<input type="text" ng-model="updatePrice"/><br />
<button type="button" value="提交" ng-click="updateSub()">提交</button>
</form>
<script src="../js/angular.min.js"></script>
<script>
var App = angular.module("App",[]);
App.controller("Democtrl",function($scope){
//给Product定义数据
$scope.Product = [{
id: 1000,
name: "iPhone8",
numss: 1,
price: 8888,
state:false
}, {
id: 1001,
name: "iPhone9",
numss: 1,
price: 9888,
state:false
}, {
id: 1002,
name: "iPhone 2s",
numss: 1,
price: 3888,
state:false
}, {
id: 1003,
name: "iPhone 7P+",
numss: 1,
price: 10088,
state:false
}];
//减减的操作 $index angularjs自带的索引 0
$scope.jian = function(index){
//0
if($scope.Product[index].numss>=1){
$scope.Product[index].numss--;
}else{
//做删除
}
}
//数量进行加加
$scope.add = function(index){
$scope.Product[index].numss++;
}
//删除
$scope.remove = function(index){
//0 1 index删除哪一个对像的索引
if(confirm("确定删除吗?")){
$scope.Product.splice(index,1);
}
}
//算总价 每一个对像的购买数量*单价相加
$scope.totalPrices = function(){
var totalPrices =0;
for (var x=0;x<$scope.Product.length;x++) {
//0 1 *8888 8888
totalPrices+=$scope.Product[x].numss*$scope.Product[x].price;
}
return totalPrices;
}
//清空
$scope.removeAll = function(){
$scope.Product = [];
}
//数量的总合
$scope.numAll = function(){
var totalNum = 0;
for (var x =0;x<$scope.Product.length;x++) {
totalNum+=$scope.Product[x].numss;
}
return totalNum;
}
/
//批量删除的
$scope.deleteAll = function(){
//默认空的数组
var arr =[];
//循环数组
for (var x =0;x<$scope.Product.length;x++) {
//如果状态是true的情况下,代表checkbox已经选中了
if($scope.Product[x].state){
arr.push($scope.Product[x].name);
}
}
//如果说数给的长度为0,证明一个都没有选中
if(arr.length<=0){
confirm("请您选中之后再进行删除");
}else{
//说明数给的长度不为0,直接删除 ng-repeat ="x in 数组"
for (index in arr) {
for (index1 in $scope.Product) {
if(arr[index]==$scope.Product[index1].name){
$scope.Product.splice(index1,1);
}
}
}
}
}
//进行添加的操作
$scope.add333 = function(){
//首先判断一下商品编号不能为空,商品编号要是数字类型
if($scope.ID=="" || $scope.ID==null){
alert("商品编号不能为空")
return;
}
if(isNaN($scope.ID)){
alert("商品编号必须是数字")
return;
}
$scope.Product.push({
id:$scope.ID,
name: $scope.IDname,
numss: $scope.IDnum,
price: $scope.IDprice
});
};
//修改的操作
$scope.updateShow = false;
var updateId="";
var updateName ="";
var updateNum ="";
var updatePrice="";
$scope.xiugai = function(index){
if(confirm("确定要修改吗?")){
$scope.updateShow = true;
$scope.updateId = $scope.Product[index].id;
$scope.updateName = $scope.Product[index].name;
$scope.updateNum = $scope.Product[index].numss;
$scope.updatePrice = $scope.Product[index].price;
}
}
//提交的按钮
$scope.updateSub = function(){
/*if(){}*/
//进行id的判断,如果id相等的情况下,我就进行删除的操作
for (index in $scope.Product) {
if($scope.updateId==$scope.Product[index].id){ //如果相等的情况下,进行数据的修改
$scope.Product[index].name=$scope.updateName;
$scope.Product[index].numss=$scope.updateNum;
$scope.Product[index].price=$scope.updatePrice;
$scope.updateShow = false;
}
}
}
});
</script>
</body>
</html>