修改

最新推荐文章于 2024-07-03 13:58:17 发布

qq494891241

最新推荐文章于 2024-07-03 13:58:17 发布

阅读量111

点赞数

<!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">
   .yellowline{
    background-color: yellow;
   }
   .redline{
    background-color: red;
   }
  </style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
  <center>
  <div>
   查询:
   <input type="text" id="" value="" placeholder="请输入查询关键字" ng-model="searchKey"/>
   排序：
   <select name="" ng-model="orderbyKey">
    <option value="0">--请选择--</option>
    <option value="name">--名称正序--</option>
    <option value="-name">--名称倒序--</option>
    <option value="price">--价格正序--</option>
    <option value="-price">--价格倒序--</option>
   </select>
   <input type="button" id="" value="入库/增加" ng-click="showAdd=!showAdd" />

  </div>

  <div ng-show="showAdd">
   <ul style="list-style: none;">
    <li>商品编号：
     <input type="text" name="" id="" value="" ng-model="asid" />

    </li>
    <li>商品名称：
     <input type="text" name="" id="" value="" ng-model="aname" />

    </li>
    <li>商品价格：
     <input type="text" name="" id="" value="" ng-model="aprice" />

    </li><li>商品产地：
     <input type="text" name="" id="" value="" ng-model="aproduct" />

    </li>
    <li>
     <input type="button" id="" value="添加" ng-click="addShop()" />

    </li>
   </ul>

  </div>


  <div>
   <input type="button" id="" value="批量删除" ng-click="delMore()" />
  </div>
  <table border="1" cellspacing="0" cellpadding="1" width="50%" style="text-align: center;" ng-show="isShowTable">
   <tr style="background-color: gray;">
    <th><input type="checkbox" name="" id="" value="" ng-model="checkAll"/></th>
    <th>序号</th>
    <th>id</th>
    <th>商品名称</th>
    <th>价格</th>
    <th>产地</th>
    <th>操作</th>
   </tr>
   
   <tr ng-repeat="x in shops|filter:searchKey|orderBy:orderbyKey" class="{{$index%2==0?'redline':'yellowline'}}">
    <td><input type="checkbox" name="" id="" value="{{x.sid}}" ng-model="checkAll" /></td>
    <td>{{$index}}</td>
    <td>{{x.sid}}</td>
    <td>{{x.name}}</td>
    <td>{{x.price}}</td>
    <td>{{x.product}}</td>
    <td>
     <input type="button" id="" value="删除" ng-click="del(x.sid)" />
     <input type="button" id="" value="修改" ng-click="modify(x.sid)"/>

    </td>



   </tr>
  </table>

  <div ng-show="showModify">
   <ul style="list-style: none;">

    <li>商品名称：
     <input type="text" name="" id="" value="" ng-model="mname" />

    </li>
    <li>商品价格：
     <input type="text" name="" id="" value="" ng-model="mprice" />

    </li><li>商品产地：
     <input type="text" name="" id="" value="" ng-model="mproduct" />

    </li>
    <li>
     <input type="button" id="" value="修改" ng-click="modifyShop()" />

    </li>
   </ul>

  </div>

  </center>
  <script type="text/javascript">
   var app=angular.module("myapp",[]);
   app.controller("myctrl",function($scope){
    //初使化是 “请选择”
    $scope.orderbyKey="0";
    //是否隐藏列表
    $scope.isShowTable=true;

    //是否隐藏添加布局
    $scope.showAdd=false;

    //是否隐藏修改布局
    $scope.showModify=false;

    //初使化列表数据
    $scope.shops=[{sid:"001",name:"小米",price:3400,product:"北京"},{sid:"002",name:"华为",price:5400,product:"上海"},{sid:"003",name:"vivo",price:8000,product:"北京"},{sid:"004",name:"oppo",price:2300,product:"北京"}];


    //定义删除方法
    $scope.del=function(id){
     for (var i = 0; i < $scope.shops.length; i++) {
      if($scope.shops[i].sid==id){//根据sid这个字段进行判断
       $scope.shops.splice(i,1);
       break;
      }
     }

     if($scope.shops.length==0){
      //隐藏列表
      $scope.isShowTable=false;
     }

    }
    //定义批量删除的方法
    $scope.delMore=function(){
     //得到选中的checkbox
     var cbs=$("input:checked");
     cbs.each(function(){
//      alert($(this).val());
      for (var i = 0; i < $scope.shops.length; i++) {
       if($scope.shops[i].sid==$(this).val()){
        $scope.shops.splice(i,1);
        break;
       }
      }

     });

     if($scope.shops.length==0){
      //隐藏列表
      $scope.isShowTable=false;
     }


    }

    //显示或隐藏添加布局
//    $scope.isShowAdd=function(){
//     if($scope.showAdd==true){
//      $scope.showAdd=false;
//     }else{
//      $scope.showAdd=true;
//     }
//    }

    //添加商品
    $scope.addShop=function(){

     var newShop={};
     newShop.sid=$scope.asid;
     newShop.name=$scope.aname;
     newShop.price=$scope.aprice;
     newShop.product=$scope.aproduct;

     //添加到集合中
     $scope.shops.push(newShop);

     //隐藏添加布局
     $scope.showAdd=false;
     //清空数据
     $scope.asid="";
     $scope.aname="";
     $scope.aprice="";
     $scope.aproduct="";
    }

    //定义一个全局变量
    var modifyData;
    //修改
    $scope.modify=function(sid){
     //显示
     $scope.showModify=true;
     for (var i = 0; i < $scope.shops.length; i++) {
      if($scope.shops[i].sid==sid){
       modifyData=$scope.shops[i];
       break;
      }

     }
     //赋值
     $scope.mname=modifyData.name;
     $scope.mprice=modifyData.price;
     $scope.mproduct=modifyData.product;


    }

    //真正修改数据
    $scope.modifyShop=function(){
     modifyData.name=$scope.mname;
     modifyData.price=$scope.mprice;
     modifyData.product=$scope.mproduct;
     //隐藏
     $scope.showModify=false;

    }





   });

  </script>




</body>
</html>

qq494891241

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
修改

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/angular.min.js" type="text/javascript" charset
复制链接

扫一扫