增删改查

来源：互联网发布：网络的通信设备有哪些编辑：程序博客网时间：2024/06/16 01:03

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>
var app=angular.module("myApp",['ngRoute']);
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/addShop",{
controller:"addShopCtrl",
templateUrl:"addShop.html"})
.when("/updateShop/:name",{
controller:"updateShopCtrl",
templateUrl:"updateShop.html"
})
.otherwise({redirectTo:"/addShop"})
}]);
//主控制器
app.controller("myCtrl",function($scope,$location){
$scope.shops=[{
"name":"qq",
"price":12.9,
"num":3,
"state":false
},{

"name":"lm",
"price":22.9,
"num":1,
"state":false
},{

"name":"wx",
"price":32.9,
"num":3,
"state":false
},{

"name":"qw",
"price":58.9,
"num":2,
"state":false
}];
//定义页面跳转方法
$scope.goToUrl = function(path){
$location.path(path);
}
//增加
$scope.add = function(index){
$scope.shops[index].num ++;
}
//减少
$scope.reduce = function(index){
if($scope.shops[index].num>1){
$scope.shops[index].num -= 1;
}else{
if(window.confirm("要删除"+$scope.shops[index].name+"吗？")){
$scope.shops.splice(index,1);
}else{

}
}
}
//删除
$scope.del=function($index){
if($index>=0){
$scope.shops.splice($index,1);
}
}
//全部删除
$scope.delete=function($index){
if($scope.shops.length>=0){
if(confirm("确认删除？")){
$scope.shops.splice($index);
}
}
}

//获取总价
$scope.allPrice = function(){
var all = 0;
for(index in $scope.shops){
all += $scope.shops[index].price * $scope.shops[index].num;
}
return all;
}

//全选
$scope.selectAll = false;
$scope.selectAllFun = function(){
if($scope.selectAll){
for(index in $scope.shops){
$scope.shops[index].state = true;
}
}else{
for(index in $scope.shops){
$scope.shops[index].state = false;
}
}
}
//反选
$scope.checkSelectAll = function(){
var flag = false;
for(index in $scope.shops){
if($scope.shops[index].state){

}else{
flag = true;
}
}
//至少有一个没有被选中
if(flag){
$scope.selectAll = false;
}else{
$scope.selectAll = true;
}
}
//批量删除
$scope.deleteSelected = function(){
var selectedShop = [];
for(index in $scope.shops){
if($scope.shops[index].state){
selectedShop.push($scope.shops[index].name);
}
}

if(selectedShop.length>0){
for(i1 in selectedShop){
for(i2 in $scope.shops){
if(selectedShop[i1] == $scope.shops[i2].name){
$scope.shops.splice(i2,1);
}
}
}
}else{
alert("请先选择")
}
}

//判断数据源的长度
$scope.getSize = function(){
if($scope.shops.length > 0 ){
return false;
}else{
return true;
}
}

});
//添加姓名、价钱、数量
app.controller("addShopCtrl",function($scope){
$scope.name = "";
$scope.price = "";
$scope.num = "";
//点击添加按钮，执行sub方法
$scope.sub = function(){
var flag1 = flag2 = flag3 = false;

if($scope.name == null || $scope.name == ""){
alert("姓名不能为空");
flag1 = false;
}else {
var flag = true;
for(shop in $scope.shops){
if($scope.shops[shop].name == $scope.name){
alert("重复")
flag = false;
flag1 = false;
}

}
if(flag){
flag1 = true;
}else{

}
}
if($scope.price == null || $scope.price == ""){
alert("价钱不能为空");
flag2 = false;
}else{
flag2 = true;
}
if($scope.num == null || $scope.num == ""){
alert("数量不能为空");
flag3 = false;
}else{
flag3 = true;
}
//判断添加用户
if(flag1 && flag2 && flag3 ){
//如果都为true即输入框都不为空，添加用户
var newShop = {
name:$scope.name,
price:$scope.price,
num:$scope.num
};
//将用户添加到数据源
$scope.shops.push(newShop);
}
}

});
app.controller("updateShopCtrl",function($scope,$routeParams){
$scope.name=$routeParams.name;
$scope.price=$routeParams.price;
$scope.num=$routeParams.num;
$scope.updateShop=function(){
for(index in $scope.shops){
if($scope.shops[index].name==$scope.name){
$scope.shops[index].price=$scope.price;
$scope.shops[index].num=$scope.num;
}
}

}

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
查询：<input type="text" ng-model="query"/>
<button ng-click="deleteSelected()">批量删除</button>
<button ng-click="delete($index)">全部删除</button>
<button class="addShop" ng-click="goToUrl('/addShop')">添加</button>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
<th>name</th>
<th>price</th>
<th>num</th>
<th>totalprice</th>
<th>option</th>
<th>option1</th>
</tr>
<tr ng-repeat="shop in shops|filter:query">
<td><input type="checkbox" ng-model="shop.state" ng-click="checkSelectAll()"/></td>
<td>{{shop.name}}</td>
<td>{{shop.price|currency:'￥'}}</td>
<td>
<button ng-click="reduce($index)">-</button>
<input type="text" ng-model="shop.num" />
<button ng-click="add($index)">+</button>
</td>
<td>{{shop.num*shop.price|currency:'￥'}}</td>
<td>
<button ng-click="del($index)">删除</button>
</td>
<td><button ng-click="goToUrl('/updateShop/'+shop.name)">修改</button></td>
</tr>
<tr>
<td colspan="7">总价：<span ng-bind="allPrice() | currency:'￥'"></span></td>
</tr>
</table>
 <script type="text/ng-template" id="addShop.html">
<form action="#">
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>name</th>
<td><input type="text" placeholder="name" ng-model="name"/></td>
</tr>
<tr>
<th>price</th>
<td><input type="text" placeholder="price" ng-model="price"/></td>
</tr>
<tr>
<th>num</th>
<td><input type="text" placeholder="num" ng-model="num"/></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
</tr>
</table>
</form>
</script>
<script type="text/ng-template" id="updateShop.html">
<form action="#">
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<th>name：</th>
<td><input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>price：</th>
<td><input ng-model="price" placeholder="请输入价钱" /></td>
</tr>
<tr>
<th>num：</th>
<td><input ng-model="num" placeholder="请输入数量" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="提交" ng-click="updateShop()" /></td>
</tr>
</table>
</form>
</script>
<div ng-view></div>
</center>
</body>

</html>

阅读全文

0 0