angularjs 购物车_购物车支付angularjs-CSDN博客

本文链接：https://blog.csdn.net/SuperZhongyulong/article/details/79715582

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/angular.min.js" ></script>
       <script>
           //代入数据
           var app = angular.module("app",[]);
           app.controller("con1",function($scope,$http){
               var id =1;
               $scope.isshow = false;
               $http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").success(function(aa){
               $scope.dates=aa;
               })
               //正反选
               $scope.zf=function(){
                   for(var i=0;i<$scope.dates.length;i++){
                       $scope.dates[i].c=$scope.ck;
                   }
               }
               //批量删除
               $scope.delall=function(){
                   for(var i=0;i<$scope.dates.length;i++){
                   if ($scope.dates[i].c) {
                       $scope.dates.splice(i,1);
                       i--;

                   }
                   }
               }
               $scope.del=function(gname){
                   for(var i in $scope.dates){
                   if ($scope.dates[i].gname ==gname) {
                       $scope.dates.splice(i,1);
                   }
               }
               }
               $scope.save=function(){

                   if ($scope.add_gname==null || $scope.add_gname=="") {
                       alert("商品名名不能为空");
                       return;
                   }
                   if($scope.add_uname==""||$scope.add_uname==null) {
                       alert("用户名名不能为空");
                       return;
                   }
                   if($scope.add_tel==""||$scope.add_tel==null) {
                       alert("电话号不能为空");
                       return;
                   }
                   if($scope.add_price==""||$scope.add_price==null) {
                       alert("价格不能为空");
                       return;
                   }
                   if($scope.add_city==""||$scope.add_city==null) {
                       alert("城市不能为空");
                       return;
                   }
                       var aa = {
                       id:id++,
                       c:false,
                       gname:$scope.add_gname,
                       uname:$scope.add_uname,
                       tel:$scope.add_tel,
                       price:$scope.add_price,
                       city:$scope.add_city,
                       regdate:new Date(),
                       state:"未发货"


                   }
                       $scope.dates.push(aa);
                       $scope.isshow=false;

               }
           })
       </script>
       <style>
           tr:nth-child(2n+1){
               background: deepskyblue;
           }
           tr:nth-child(2n){
               background: crimson;
           }
       </style>
   </head>
   <body ng-app="app" ng-controller="con1">
   <button ng-click="isshow=true">新增用户</button>
   <button ng-click="delall()">批量删除</button>
   <input placeholder="请输入用户名" ng-model="sname"/>
   <input placeholder="请输入电话号码" ng-model="stel" />
   <select ng-model="ss">
       <option value="">请选择状态</option>
       <option>已发货</option>
       <option>未发货</option>
   </select>
       <table border="1">
           <tr style="background: yellow;">
               <th><input type="checkbox" ng-click="zf()" ng-model="ck"></th>
               <th>id<button ng-click="px='id';f=!f">排序</button></th>
               <th>商品名</th>
               <th>用户名</th>
               <th>手机号</th>
               <th>价格<button ng-click="px=price;f=!f">排序</button></th>
               <th>城市</th>
               <th>下单时间<button ng-click="px=regdate;f=!f">排序</button></th>
               <th>状态</th>
               <th>操作</th>
           </tr>
           <tr ng-repeat="d in dates|orderBy:px:f|filter:{gname:sname,tel:stel,state:ss}">
               <td><input type="checkbox" ng-model="d.c"></td>
               <td>{{d.id}}</td>
               <td>{{d.gname}}</td>
               <td>{{d.uname}}</td>
               <td>{{d.tel}}</td>
               <td><span ng-hide="xg">{{d.price|currency:'￥:'}}</span><span ng-show="xg"><input type="text" ng-show="xg" ng-model="d.price"><button ng-click="xg=false">保存</button></span></td>
               <td>{{d.city}}</td>
               <td>{{d.regdate|date:'MM-dd hh:mm:ss'}}</td>
               <td>
                   <span style="background: green;" ng-show="d.state=='未发货'">
                       <a href="#" ng-click="d.state='已发货'">未发货</a></span>
                   <span style="background: yellow;" ng-show="d.state=='已发货'">已发货</span>
               </td>
               <td><button ng-click="del(d.gname)">删除</button>
                   <button ng-click="xg=true">修改</button>
               </td>
           </tr>
       </table>
       <div ng-show="isshow" >
           商品名<input placeholder="请输入商品名" ng-model="add_gname"/><br />
           用户名<input placeholder="请输入用户名" ng-model="add_uname" /><br />
           手机号<input placeholder="请输入手机号" ng-model="add_tel" /><br />
           价格为<input placeholder="请输入价格" ng-model="add_price" /><br />
           城市<select ng-model="add_city">
               <option value="">--选择城市--</option>
               <option>北京</option>
               <option>上海</option>
               <option>广州</option>
               <option>深圳</option>
           </select><br />
           <button ng-click="save()">保存</button>
       </div>
   </body>
</html>