angularjs增删改查

最新推荐文章于 2018-03-30 13:04:23 发布

置顶得劲得演员

最新推荐文章于 2018-03-30 13:04:23 发布

阅读量252

点赞数

分类专栏： angular代码文章标签： angular

本文链接：https://blog.csdn.net/qq_41636736/article/details/79070746

版权

angular代码专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .an1{background-color: chartreuse;}
   .an2{background-color: chartreuse;}
   .an3{background-color:red;}

   tbody tr:nth-child(even) {
    background-color: aqua;
   }

   tbody tr:nth-child(odd) {
    background-color: gold;
   }


  </style>
  <script type="text/javascript" src="../js/angular.js" ></script>
  <script>
   var app=angular.module("myapp",[]);
   app.controller("mycon",function($scope){
    $scope.arr=[1,2,3,4,5,6,7,8,9,10,11,12];
    $scope.shang=[
    {id:7,
     usname:"OppO R9sk",
     name:"关羽",
     shouji:"15777777777",
     jiage:4999,
     chengshi:"北京",
     xiadan:new Date("2017-05-02"),
     tai:"已发货",
     state:false
    },
    {id:12,
     usname:"VIVO X20",
     name:"赵云",
     shouji:"1333333333",
     jiage:2998,
     chengshi:"上海",
     xiadan:new Date("2017-06-02"),
     tai:"未发货",
     state:false
    },
    {id:1,
     usname:"iphone 8 Plus",
     name:"曹操",
     shouji:"1511111111",
     jiage:7588,
     chengshi:"北京",
     xiadan:new Date("2017-07-02"),
     tai:"已发货",
     state:false
    },
    ]
   //添加
    $scope.jia=false;
    $scope.tianjia=function(){
     var s={
      id:$scope.x_id,
      usname:$scope.x_usname,
      name:$scope.x_name,
      shouji:$scope.x_shouji,
      jiage:$scope.x_jiage,
      chengshi:$scope.x_chengshi,
      xiadan:new Date(),
       tai:"未发货"
     }
     $scope.shang.push(s);
     $scope.jia=false;
    }
   //删除
    $scope.sanchu=function($index){
     $scope.shang.splice($index,1)
    }
   //全选
    $scope.quan=false;
    $scope.xuan=function(){
     if($scope.quan){
      for(index in $scope.shang){
      $scope.shang[index].state = true;
      }
     }else{
      for(index in $scope.shang){
      $scope.shang[index].state = false;
      }
     }

    };
   //批量删除
    $scope.pisan = function() {
     if(confirm("确定删除吗")) {
      for(var i = 0; i < $scope.shang.length; i++) {

       if($scope.shang[i].state == true) {
        $scope.shang.splice(i, 1);
        i--;
       }
      }
     }
    }
   //判断日期
    $scope.valu = function(m){

    var mm = m.getMonth() +1;

    var start = $scope.ks;
    var end = $scope.js;

    if(start==undefined ||start==""){

     start=1;

    }
    if(end == undefined || end == ""){

     end=12;


    }
    if(mm >= start && mm <=end){

     return true;

    }else{
     return false;

    }

    }
   })
  </script>
</head>
<body ng-app="myapp" ng-controller="mycon">

   <input type="text" placeholder="用户名搜索" ng-model="mohu"/>
   <input type="text" placeholder="手机号搜索" ng-model="shou"/>
   <select ng-model="cheng" >
    <option value="">选择城市</option>
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="辽宁">辽宁</option>
    <option value="深圳">深圳</option>
   </select>
   <select ng-model="zta">
    <option value="">选择状态</option>
    <option value="已发货">已发货</option>
    <option value="未发货">未发货</option>
   </select>
   <select ng-model="ks"><option value="">开始时间</option><option ng-repeat="a in arr">{{a}}</option></select>
   <select ng-model="js"><option value="">结束时间</option><option ng-repeat="a in arr">{{a}}</option></select>
   <select ng-model="pai">
    <option value="">ID排序</option>
    <option value="id">正序排序</option>
    <option value="-id">倒序排序</option>
   </select><br /><br>
   <button class="an1" ng-click="jia=true">新增订单</button>
   <button class="an2">批量发货</button>
   <button class="an3" ng-click="pisan()">批量删除</button>敏感字：米(商品名)->替换*<br><br>

  <table cellpadding="15" cellspacing="0" border="1">
   <thead>
    <tr bgcolor="darkgray">
     <th><input type="checkbox" ng-model="quan" ng-click="xuan()"></th>
     <th>ID</th>
     <th>商品名</th>
     <th>用户名</th>
     <th>手机号</th>
     <th>价格</th>
     <th>城市</td>
     <th>下单时间</th>
     <th>状态</th>
     <th>操作</th>
    </tr>
   </thead>

   <tbody>
    <tr ng-repeat="diao in shang | filter:{name:mohu}|filter:{shouji:shou}|filter:{chengshi:cheng} | orderBy:pai | filter:{tai:zta}" ng-show="valu(diao.xiadan)" align="center">
     <td><input type="checkbox" ng-model="diao.state"></td>
     <td ng-if="">{{$index}}</td>
     <td>{{diao.id}}</td>
     <td>{{diao.usname}}</td>
     <td>{{diao.name}}</td>
     <td>{{diao.shouji}}</td>
     <td>{{diao.jiage | currency:'¥'}}</td>
     <td>{{diao.chengshi}}</td>
     <td>{{diao.xiadan | date:"MM-dd hh:mm"}}</td>
     <td>
      <span ng-if="diao.tai=='已发货'">已发货</span>
      <span ng-if="diao.tai=='未发货'">
       <a href="#" ng-click="diao.tai='已发货'">未发货</a>
      </span>
     </td>
     <td><button>修改</button> <button ng-click="sanchu($index)">删除</button></td>
    </tr>
   </tbody>
  </table>
<p ng-show="jia">
  ID:<input type="text" ng-model="x_id"/><br>
  商品名:<input type="text" ng-model="x_usname"/><br />
  用户名:<input type="text" ng-model="x_name"/><br />
  手机号:<input type="text" ng-model="x_shouji"/><br />
  价格:<input type="text" ng-model="x_jiage"/><br />
  城市:<input type="text" ng-model="x_chengshi"/><br />

  <button ng-click="tianjia()">OK</button>
</p>
</body>
</html>