AngularJs 表单

来源：互联网发布：c语言能够做什么编辑：程序博客网时间：2024/05/22 12:02

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.wares =[{
id:80,
name:"iPhone",
price:5400,
state:false
},{
id:290,
name:"ipad",
price:1420,
state:false
},{
id:500,
name:"ipad air",
price:2340,
state:false
},{
id:910,
name:"imac",
price:15400,
state:false
},{
id:1200,
name:"ipad mini",
price:2200,
state:false
},];
//删除当前项
$scope.de = function(name){
if(window.confirm("确定要删除"+name+"吗？")){
for(index in $scope.wares){
if(name == $scope.wares[index].name){
$scope.wares.splice(index,1);
}
}
}
}
//全选，全不选
$scope.selectAll = false;
$scope.selectAllFun = function(){
if($scope.selectAll){
for(index in $scope.wares){
$scope.wares[index].state = true;
}
}else{
for(index in $scope.wares){
$scope.wares[index].state = false;
}
}
}
//反选
// $scope.checkSelAll = function(){
// var tp = false;
// for(index in $scope.wares){
// if(!$scope.wares[index].state){
// //满足条件
// tp = true;
// }
// }
// if(tp){
// $scope.selectAll = false;
// }else{
// $scope.selectAll = true;
// }
// }
$scope.checkSelAll = function(){
var a = 0;
for(index in $scope.wares){
if($scope.wares[index].state == true){
a++;
}
}
if(a == $scope.wares.length){
$scope.selectAll = true;
}else{
$scope.selectAll = false;
}
}
//批量删除
$scope.delSelect = function(){
var selArr = [];
for(index in $scope.wares){
if($scope.wares[index].state){
selArr.push($scope.wares[index].name)
}
}
if(selArr.length<=0){
alert("请先选择");
}else{
if(window.confirm("确定要删除吗？")){
for(index1 in selArr){
for(index2 in $scope.wares){
if(selArr[index1] == $scope.wares[index2].name){
$scope.wares.splice(index2,1);
}
}
}
}
}
}
//修改价格
$scope.up = function(price){
//获得价格
for(index in $scope.wares){
if(price == $scope.wares[index].price){
var result = window.prompt("请输入要修改的价格",price);
if(isNaN(result)){
alert("输入有误，请重新输入");
}else{
if(window.confirm("确定要将"+price+"的价格更改为："+result+"吗？")){
$scope.wares[index].price=result;
}
}
}
}
}

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
产品名称：<input type="text" placeholder="产品名称" ng-model="cname" />
排序：<select ng-model="pai">
<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" cellpadding="10" cellspacing="0">
<thead>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
<th>产品编号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>操作</th>
</thead>
<tbody>
<tr ng-repeat="ware in wares | filter:{name:cname} | orderBy:pai">
<td><input type="checkbox" ng-model="ware.state" ng-click="checkSelAll()"/></td>
<td>{{ware.id}}</td>
<td>{{ware.name}}</td>
<td>{{ware.price}}</td>
<td width="100px">
<button ng-click="de(ware.name)">删除</button>
 <button ng-click="up(ware.price)">修改</button></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

阅读全文

0 0