添加_494891241-CSDN博客

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
  <style type="text/css">
   .p1 tr:nth-child(odd){
    background-color: orange;
   }
   .p1 tr:nth-child(even){
    background-color: greenyellow;
   }

  </style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
  <center>
   <button ng-click="dell()">批量删除</button>
   <button ng-click="sw = !sw">添加</button>
   <table border="1" class="p1">
   <tr style="background-color: gray;">
    <th><input type="checkbox" ng-model="qq" ng-click="all()"/></th>
    <th>名称</th>
    <th>价格<input type="button" value=">" ng-click="px()" /></th>
    <th>产地</th>
    <th>删除</th>
   </tr>
   <tr ng-repeat="x in shops | orderBy:oid">
    <td><input type="checkbox" ng-model="x.qx"/></td>
    <td>{{x.name}}</td>
    <td>{{x.price|currency:"$"}}</td>
    <td>{{x.product}}</td>
    <td>
     <input type="button" value="删除" ng-click="del($index)" />
    </td>
   </tr>
  </table>

  <table ng-show="sw">
   <tr>
    <td>
     名称：
     <input type="text" ng-model="zname"/>
     <span ng-show="mc">
      名字不为空
     </span>
    </td>
   </tr>
   <tr>
    <td>
     价格：
     <input type="text" ng-model="zprice"/>
    </td>
   </tr>
   <tr>
    <td>
     产地：
     <input type="text" ng-model="zproduct"/>
    </td>
   </tr>
   <tr>
    <td><button ng-click="add()">添加</button></td>
   </tr>
  </table>


  </center>


  <script type="text/javascript">

   var app = angular.module("myapp",[]);

   app.controller("myctrl",function($scope,$http){
    $http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=monthTest2")
    .then(function(res){
     $scope.shops= res.data;
    })

    //删除功能
    $scope.del = function(index){
     $scope.shops.splice(index,1);
    }

    //价格排序
    var ids = true;
    $scope.px = function(){
     if(ids){
      $scope.oid = "price";
      ids = false;
     }else{
      $scope.oid = "-price"
      ids = true;
     }
    }

    //批量删除
    $scope.dell = function(){
     for (var i = 0; i < $scope.shops.length; i++) {
      if($scope.shops[i].qx){
       $scope.shops.splice(i,1);
       i--;
      }
     }
    }

    //全选
    $scope.all = function(){
     for(var i in $scope.shops){
      $scope.shops[i].qx = $scope.qq;
     }
    }

    //添加并验证
    $scope.add = function(){
      var s = {};
      var gname = $scope.zname;
      var gprice = parseInt($scope.zprice);
      var gproduct = $scope.zproduct;
     if(gname == "" || gname == null){
//      alert("名字不为空");
      $scope.mc = true;
      return;
     }else{
      $scope.mc = false;
     }
     if(gprice <= 0 || gprice == null || isNaN(gprice) == true){
      alert("价格大于0");
      return;
     }
     if(gproduct == "" || gproduct == null){
      alert("产地不能为空");
      return;
     }

     s = {name:gname,price:gprice,product:gproduct};
     $scope.shops.push(s);
    }

   })




  </script>

</body>
</html>