<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.css1{
background-color: yellow;
}
.css2{
background-color: red;
}
</style>
</head>
<body ng-controller="Dem">
<div>
<input type="text" placeholder="请输入查询商品" ng-model="search"/>
数量排序：
<select ng-model="selectone">
<option value="numss">正数排序</option>
<option value="-numss">负数排序</option>
</select>
<button ng-click="deledeall()">批量删除</button>
</div>
<table border="2">
<tr>
<td><input type="checkbox" ng-click="checkboxall"></td>
<td>编号</td>
<td>名字</td>
<td>数量</td>
<td>单价</td>
<td>总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in Product | filter:{name:search} | orderBy:selectone" 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="text" ng-model="x.numss"/>
<button ng-click="jia($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.price*x.numss}}</td>
<td>
<button ng-click="remove($index)">删除</button>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<div>
<span>总价:</span>
<span>{{allprice()}}</span>
<span>总量:</span>
<span>{{allnumss()}}</span>
<button ng-click="removeall()">清空</button>
</div>
<form style="border: 1px solid yellow ;">
商品编号：<input type="text" ng-model="IDid" /><br />
商品名字：<input type="text" ng-model="IDname" /><br />
商品数量：<input type="text" ng-model="IDnumss" /><br />
商品单价：<input type="text" ng-model="IDprice" /><br />
<button ng-click="add33()">添加</button>
</form>
<form style="border: 1px solid yellow ;" ng-show="updateone">
商品编号：<input type="text" ng-model="updateid" /><br />
商品名字：<input type="text" ng-model="updatename" /><br />
商品数量：<input type="text" ng-model="updatenumss" /><br />
商品单价：<input type="text" ng-model="updateprice" /><br />
<input type="button" value="提交" ng-click="update33()"/>
</form>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var App=angular.module("App",[]);
App.controller("Dem",function($scope){
//定义数据
$scope.Product=[{
id: 1001,
name:"ipone",
numss:1,
price:8888,
state:false
},
{
id: 1002,
name:"ipone1",
numss:1,
price:18888,
state:false},
{
id: 1003,
name:"ipone2",
numss:1,
price:28888,
state:false
}];
//减减操作
$scope.jian=function(index){
if($scope.Product[index].numss>=1){
$scope.Product[index].numss--;
}else{
}
};
//加加操作
$scope.jia=function(index){
$scope.Product[index].numss++;
};
//删除操作
$scope.remove=function(index){
$scope.Product.splice(index,1);
};
//总价
$scope.allprice=function(){
var allprice=0;
for(var x=0;x<$scope.Product.length;x++){
allprice+=$scope.Product[x].numss*$scope.Product[x].price;
}
return allprice;
};
//总量
$scope.allnumss=function(){
var allnumss=0;
for(var x=0;x<$scope.Product.length;x++){
allnumss+=$scope.Product[x].numss;
}
return allnumss;
};
//qingkong
$scope.removeall = function(){
$scope.Product = [];
}
//批量删除
$scope.deledeall=function(){
var arr=[];
for (var x=0;x<$scope.Product.length;x++) {
if($scope.Product[x].state){
arr.push($scope.Product[x].name);
}
}
if(arr.length<=0){
confirm("请选中之后再进行操作");
}else{
//批量删除
for(index in arr){
for (index1 in $scope.Product) {
if(arr[index]==$scope.Product[index1].name){
$scope.Product.splice(index1,1);
}
}
}
}
};
//添加
$scope.add33=function(){
if($scope.IDid=="" ||$scope.IDid==null){
alert("商品编号不能为空！")
return;
}
if(isNaN($scope.IDid)){
alert("商品编号必须是数字")
return;
}
$scope.Product.push(
{
id:$scope.IDid,
name :$scope.IDname,
numss:$scope.IDnumss,
price:$scope.IDprice,
}
)
}
//修改
$scope.updateone=false;
var updateid="";
var updatename="";
var updatenumss="";
var updateprice="";
$scope.update=function(index){
if(confirm("确定要修改吗？")){
$scope.updateone=true;
//回显
$scope.updateid=$scope.Product[index].id;
$scope.updatename =$scope.Product[index].name ;
$scope.updatenumss=$scope.Product[index].numss;
$scope.updateprice=$scope.Product[index]. price;
}
}
//修改按钮
$scope.update33=function(){
for (index in $scope.Product) {
if($scope.updateid==$scope.Product[index].id){
$scope.Product[index].name=$scope.updatename;
$scope.Product[index].numss=$scope.updatenumss;
$scope.Product[index].price=$scope.updateprice;
}
}
};
});
</script>
</body>
</html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.css1{
background-color: yellow;
}
.css2{
background-color: red;
}
</style>
</head>
<body ng-controller="Dem">
<div>
<input type="text" placeholder="请输入查询商品" ng-model="search"/>
数量排序：
<select ng-model="selectone">
<option value="numss">正数排序</option>
<option value="-numss">负数排序</option>
</select>
<button ng-click="deledeall()">批量删除</button>
</div>
<table border="2">
<tr>
<td><input type="checkbox" ng-click="checkboxall"></td>
<td>编号</td>
<td>名字</td>
<td>数量</td>
<td>单价</td>
<td>总价</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in Product | filter:{name:search} | orderBy:selectone" 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="text" ng-model="x.numss"/>
<button ng-click="jia($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.price*x.numss}}</td>
<td>
<button ng-click="remove($index)">删除</button>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<div>
<span>总价:</span>
<span>{{allprice()}}</span>
<span>总量:</span>
<span>{{allnumss()}}</span>
<button ng-click="removeall()">清空</button>
</div>
<form style="border: 1px solid yellow ;">
商品编号：<input type="text" ng-model="IDid" /><br />
商品名字：<input type="text" ng-model="IDname" /><br />
商品数量：<input type="text" ng-model="IDnumss" /><br />
商品单价：<input type="text" ng-model="IDprice" /><br />
<button ng-click="add33()">添加</button>
</form>
<form style="border: 1px solid yellow ;" ng-show="updateone">
商品编号：<input type="text" ng-model="updateid" /><br />
商品名字：<input type="text" ng-model="updatename" /><br />
商品数量：<input type="text" ng-model="updatenumss" /><br />
商品单价：<input type="text" ng-model="updateprice" /><br />
<input type="button" value="提交" ng-click="update33()"/>
</form>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var App=angular.module("App",[]);
App.controller("Dem",function($scope){
//定义数据
$scope.Product=[{
id: 1001,
name:"ipone",
numss:1,
price:8888,
state:false
},
{
id: 1002,
name:"ipone1",
numss:1,
price:18888,
state:false},
{
id: 1003,
name:"ipone2",
numss:1,
price:28888,
state:false
}];
//减减操作
$scope.jian=function(index){
if($scope.Product[index].numss>=1){
$scope.Product[index].numss--;
}else{
}
};
//加加操作
$scope.jia=function(index){
$scope.Product[index].numss++;
};
//删除操作
$scope.remove=function(index){
$scope.Product.splice(index,1);
};
//总价
$scope.allprice=function(){
var allprice=0;
for(var x=0;x<$scope.Product.length;x++){
allprice+=$scope.Product[x].numss*$scope.Product[x].price;
}
return allprice;
};
//总量
$scope.allnumss=function(){
var allnumss=0;
for(var x=0;x<$scope.Product.length;x++){
allnumss+=$scope.Product[x].numss;
}
return allnumss;
};
//qingkong
$scope.removeall = function(){
$scope.Product = [];
}
//批量删除
$scope.deledeall=function(){
var arr=[];
for (var x=0;x<$scope.Product.length;x++) {
if($scope.Product[x].state){
arr.push($scope.Product[x].name);
}
}
if(arr.length<=0){
confirm("请选中之后再进行操作");
}else{
//批量删除
for(index in arr){
for (index1 in $scope.Product) {
if(arr[index]==$scope.Product[index1].name){
$scope.Product.splice(index1,1);
}
}
}
}
};
//添加
$scope.add33=function(){
if($scope.IDid=="" ||$scope.IDid==null){
alert("商品编号不能为空！")
return;
}
if(isNaN($scope.IDid)){
alert("商品编号必须是数字")
return;
}
$scope.Product.push(
{
id:$scope.IDid,
name :$scope.IDname,
numss:$scope.IDnumss,
price:$scope.IDprice,
}
)
}
//修改
$scope.updateone=false;
var updateid="";
var updatename="";
var updatenumss="";
var updateprice="";
$scope.update=function(index){
if(confirm("确定要修改吗？")){
$scope.updateone=true;
//回显
$scope.updateid=$scope.Product[index].id;
$scope.updatename =$scope.Product[index].name ;
$scope.updatenumss=$scope.Product[index].numss;
$scope.updateprice=$scope.Product[index]. price;
}
}
//修改按钮
$scope.update33=function(){
for (index in $scope.Product) {
if($scope.updateid==$scope.Product[index].id){
$scope.Product[index].name=$scope.updatename;
$scope.Product[index].numss=$scope.updatenumss;
$scope.Product[index].price=$scope.updateprice;
}
}
};
});
</script>
</body>
</html>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
