增删改查

来源:互联网 发布:网络的通信设备有哪些 编辑:程序博客网 时间:2024/06/16 06:33
<!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>
<!-- <span ng-show="getSize()">您的购物车为空,请闲逛<a href="#">购物车</a></span>
-->     <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>


原创粉丝点击