增删查改

sdas<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
  <script src="../js/angular.min.js"></script>
  <script src="../js/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    $scope.goods = [{
     "id":1,
     "name":"小米8",
     "price":4999,
     "count":2
    },{
     "id":2,
     "name":"华为mateRS",
     "price":14999,
     "count":1
    },{
     "id":3,
     "name":"三星S9+",
     "price":5499,
     "count":3
    }];

    //添加
    $scope.addGood = function(){
     var good = {};

     //id非空验证
     if($scope.id == "" || $scope.id == null){
      $scope.showId = true;
      return;
     }else{
      good.id = $scope.id;
      $scope.showId = false;
     }
     //姓名非空验证
     if($scope.name == null || $scope.name == ""){
      $scope.showName = true;
      return;
     }else{
      good.name = $scope.name;
      $scope.showName = false;
     }
     //数量非空验证

     if($scope.count == null || $scope.count == ""){
      $scope.showCount = true;
      return;
     }else{
      good.count = $scope.count;
      $scope.showCount = false;
     }

     //价格非空验证

     if($scope.price == "" || $scope.price == null){
      $scope.showPrice = true;
      return;
     }else{
      good.price = $scope.price;
      $scope.showPrice = false;
     }


     $scope.goods.push(good);

     //添加之后添加模块隐藏
     $scope.showAdd = false;
     //添加的信息显示到列表
     $scope.showTable = true;
    }

    $scope.showTable = true;

    //删除
    $scope.del = function(gname){

     for (var i = 0;i<$scope.goods.length;i++) {
      if($scope.goods[i].name == gname){
       $scope.goods.splice(i,1);
      }
     }
     if($scope.goods.length == 0){
      $scope.showTable = false;
     }

    }

    //排序
    $scope.orderKey = "";
    //查询
    $scope.selectKey = "";

    $scope.checkAll = false;

    $scope.deleteAll = function(){
     if($scope.checkAll){
      $scope.goods=[];
     }else{

      var checked = $scope("input[type=checkbox]:checked")

      for (var i = 0; i<checked.length - 1;i--) {
       $scope.goods.splice(checked[i].value,1);
      }
     }
    }


   $scope.showUpdate = false;
   $scope.uname = "";
   $scope.count = "";
   $scope.price = "";

   var updateGood = "";
   $scope.update = function(gname){
    $scope.showUpdate = "true";

    for(var i = 0;i<$scope.goods.length;i++){
     if ($scope.goods[i].name == gname) {
      updateGood = $scope.goods[i];
      break;
     }
    }

    $scope.uname = updateGood.name;
    $scope.ucount = updateGood.count;
    $scope.uprice = updateGood.price;
   }

   $scope.updateGood = function(){
    updateGood.name = $scope.uname;
    updateGood.count = $scope.ucount;
    updateGood.price = $scope.uprice;

    $scope.showUpdate = true;
   }
   $scope.showUpdate = false;
  });


  </script>
  <style type="text/css">
   table{
    width: 800px;
    text-align: center;
   }
   span{
    color: red;
   }
  </style>
<body ng-app="myApp" ng-controller="myCtrl">
   <center>
    <div>
     查询:<input type="text" placeholder="请输入要查询的关键字" ng-model="selectKey"/>
     排序:
     <select ng-model="orderKey">
      <option value="">--请选择--</option>
      <option value="-name">名称正序</option>
      <option value="name">名称倒序</option>
      <option value="price">价格正序</option>
      <option value="-price">价格倒序</option>
     </select>
     <input type="button" value="入库/增加" ng-click="showAdd = !showAdd" />
    </div>
    <div ng-show="showAdd">
     商品编号:<input type="text" ng-model="id" placeholder="请输入商品编号" />
     <span ng-show="showId">*Id不可为空</span><br>
     商品名称:<input type="text" ng-model="name" placeholder="请输入商品名称" />
     <span ng-show="showName">*姓名不可为空</span><br>
     商品价格:<input type="text" ng-model="price" placeholder="请输入商品价格" />
     <span ng-show="showPrice">*价格不可为空</span><br>
     商品数量:<input type="number" ng-model="count" placeholder="请输入商品数量" />
     <span ng-show="showCount">*数量不可为空 </span><br>
     <input type="button" value="添加" ng-click="addGood()" id = "add" />
    </div>
    <div style="margin-right: 10px;"><input type="button" value="批量删除" ng-click="deleteAll();" /></div>
    <table border="1" ng-show="showTable">
     <tr>
      <td>
       <input type="checkbox" ng-model="checkAll"/>
      </td>
      <td>商品编号</td>
      <td>商品名称</td>
      <td>商品价格</td>
      <td>商品数量</td>
      <td>商品小计</td>
      <td>商品操作</td>
     </tr>
     <tr ng-repeat="g in goods | orderBy:orderKey | filter:selectKey">
      <td>
       <input type="checkbox" ng-model="checkAll"/>
      </td>
      <td>{{g.id}}</td>
      <td>{{g.name}}</td>
      <td>{{g.price}}</td>
      <td>{{g.count}}</td>
      <td>￥:{{g.count * g.price}}</td>
      <td>
       <input type="button" value="删除" ng-click="del(g.name)" />
       <input type="button" value="修改" ng-click="update(g.name)"/>
      </td>
     </tr>
   </table>
   <div ng-show="showUpdate">
    商品名称:<input type="text" ng-model="uname"/><br>
    商品数量:<input type="text" ng-model="ucount" /><br>
    商品价格:<input type="text" ng-model="uprice" /><br>
    <input type="button" value="提交修改" ng-click="updateGood();" />
   </div>
  </center>
</body>
</html>

猜你喜欢