angular增删改查

最新推荐文章于 2019-10-25 14:57:12 发布

min121515

最新推荐文章于 2019-10-25 14:57:12 发布

阅读量161

点赞数 1

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
  <title></title>
  <script type="text/javascript" src="js/angular.min.js" ></script>
  <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
  <script>
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    $scope.goods =
     [
      {"id":1,"name":"小米5","price":1600,"product":"北京"},
      {"id":2,"name":"华为p10","price":4200,"product":"东莞"},
      {"id":3,"name":"vivox20","price":2600,"product":"佛山"}
     ];
    //查询关键字
    $scope.seacherKey = "";
    //排序关键字
    $scope.orderKey = "";
    //全选复选框的绑定字段
    $scope.checkAll = false;

    //显示添加模块，，默认不显示
    $scope.showAdd = false;

    //创建和新增商品信息相绑定的字段属性
    $scope.name = "";
    $scope.price = "";
    $scope.product = "";
    //添加按钮的点击事件
    $scope.addGood = function(){
     var good = {};
     good.name = $scope.name;//把输入的商品名称给 good对象
     good.price = $scope.price;
     good.product = $scope.product;
     //把good添加到 goods数组中，数据源
     $scope.goods.push(good);
     //隐藏添加区域
     $scope.showAdd = false;
     //显示table
     $scope.showTable = true;
    }

    //控制table是否显示的属性
    $scope.showTable = true;
    //删除
    $scope.deleteGood = function(gname){
//     $scope.goods.splice($index,1);//从$index开始，删除1条
     //遍历数组，找到要删除的商品
     for(var i=0;i<$scope.goods.length;i++){
      if($scope.goods[i].name == gname){//遍历得到的商品信息就是我们要删除的，，i就是他再数组中的索引
       $scope.goods.splice(i,1);
       break;//删除后跳出循环
      }
     }
     //如果删光了，隐藏table的头
     if($scope.goods.length == 0){
      $scope.showTable = false;//隐藏
     }
    }

    //是否显示修改回显区域
    $scope.showUpdate = false;
    $scope.upIndex = "";
    //定义接收修改信息的字段
    $scope.upname = "";
    $scope.upprice = "";
    $scope.upproduct = "";

    var updateGood = "";//要修改的商品信息
    //修改按钮的回调
    $scope.showGood = function(gname){//$index表示要修改的数据的索引
     //显示修改回显区域
     $scope.showUpdate = true;


     //遍历数组，找到要修改的商品
     for(var i=0;i<$scope.goods.length;i++){
      if($scope.goods[i].name == gname){//遍历得到的商品信息就是我们要删除的，，i就是他再数组中的索引
       updateGood = $scope.goods[i];
       break;//找到修改的商品后，跳出循环
      }
     }
     //显示修改信息到页面，，第一步得到修改信息
     $scope.upname = updateGood.name;
     $scope.upprice = updateGood.price;
     $scope.upproduct = updateGood.product;

    }
    //提交修改
    $scope.updateGood = function(){
     updateGood.name = $scope.upname;//把新的名字替换旧名字
     updateGood.price = $scope.upprice;
     updateGood.product = $scope.upproduct;
     //隐藏修改回显区域
     $scope.showUpdate = false;
    }

    //批量删除
    $scope.deleteMore = function(){
     if($scope.checkAll){//全选打钩，全部打钩，，全删除
      $scope.goods = [];
     }else{//不是全删除
      var checked = $("input[type=checkbox]:checked");//获得所有打钩的复选框
      for(var i= checked.length-1;i>=0;i--){//从大往小遍历选中的复选框
       $scope.goods.splice(checked[i].value,1);//通过复选框中的索引，到数据源中删除数据，，从下往上删除
      }
     }
    }

   });
  </script>
  <style>
   th,td{
    width: 80px;
    text-align: center;
   }
   /**定义两个颜色样式**/
   .yellow{
    background-color: yellow;
   }
   .red{
    background-color: red;
   }
  </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

  <center>
  <div>查询：<input type="text" placeholder="请输入查询关键字" ng-model="seacherKey"/>    
       排序：<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>
  <br />
  <div ng-show="showAdd">
   商品名称：<input type="text" placeholder="请输入商品名称" ng-model="name"/><br />
   商品价钱：<input type="number" placeholder="请输入商品价钱" ng-model="price"/><br />
   商品产地：<input type="text" placeholder="请输入商品产地" ng-model="product"/><br />
   <input type="button" value="添加" ng-click="addGood();"/>
  </div>
  <br />
  <div style="margin-right: 10px;"><input type="button" value="批量删除" ng-click="deleteMore();"/></div><br />
  <table ng-show="showTable" border="1px" bordercolor="green" cellpadding="1px" cellspacing="0px">
   <tr style="background-color: gray;">
    <th><input type="checkbox" ng-model="checkAll"/></th>
    <th>序号</th>
    <th>id</th>
    <th>商品名称</th>
    <th>价钱</th>
    <th ng-click="orderKey='product'">产地</th>
    <th style="width: 110px;">操作</th>
   </tr>
   
   
   <tr ng-repeat="g in goods | filter:seacherKey | orderBy:orderKey " class="{{$index%2? 'yellow':'red'}}" >
    <td><input type="checkbox" value="{{$index}}" ng-model="checkAll"/></td>
    <td>{{$index}}</td>
    <td>{{g.id}}</td>
    <td>{{g.name}}</td>
    <td>{{g.price}}</td>
    <td>{{g.product}}</td>
    <td >
     <input type="button" value="删除" ng-click="deleteGood(g.name);"/>  
     <input type="button" value="修改" ng-click="showGood(g.name);"/>
    </td>
   </tr>

  </table>
  <br />
  <div ng-show="showUpdate">
   商品名称：<input type="text" ng-model="upname"/><br />
   商品价钱：<input type="number" ng-model="upprice"/><br />
   商品产地：<input type="text" ng-model="upproduct"/><br /><br />
   <input type="button" value="提交修改" ng-click="updateGood();"/>
  </div>
  <br />
  </center>
  <p>{{goods}}</p>
</body>
</html>

min121515

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular增删改查

&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /&gt;
复制链接

扫一扫