angular js 删除修改表格

最新推荐文章于 2019-02-16 17:06:43 发布

转载最新推荐文章于 2019-02-16 17:06:43 发布 · 203 阅读

文章标签：

#angular

本文介绍了一个使用AngularJS实现的商品管理系统，该系统支持商品的增删改查、排序及过滤等功能。通过实例展示了如何利用AngularJS进行前端开发，包括双向数据绑定、控制器和服务等关键概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

  <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 type="text/javascript">
   var app = angular.module("myApp",[]);
   app.controller("myCtrl",function($scope){
    //准备数据源
    $scope.goods = [
      {"id":"201","name":"冰激凌","price":3,"brand":"蒙牛"},
      {"id":"202","name":"老冰棍","price":1,"brand":"老北京"},
      {"id":"203","name":"西瓜","price":10,"brand":"麒麟"},
      {"id":"204","name":"可乐","price":5,"brand":"百事"},
      {"id":"205","name":"雪碧","price":5,"brand":"可口"}
     ];

     //过滤条件
     $scope.searchKey;
     //排序条件
     $scope.orderByKey;
     //通过id删除
     $scope.deletGoodsById = function(_id){
      for (var i=0;i<$scope.goods.length;i++) {
       var g = $scope.goods[i];
       if (g.id == _id) {
        $scope.goods.splice(i,1);
        break;
       }
      }
     };

     //全选
     $scope.checkall = true;
     //添加
     $scope.addIsShow = false;
     $scope.newname;
     $scope.newprice;
     $scope.newbrand;
     $scope.addNewGood = function(){
      var n = Math.round(Math.random()*100);
      var a = {};
      a.id = n;
      a.name = $scope.newname;
      a.price = $scope.newprice;
      a.brand = $scope.newbrand;

      //添加到数组
      $scope.goods.push(a);
      $scope.addIsShow = false;
     }

     //修改
     $scope.updateGood;
     $scope.updateIsShow = false;
     $scope.updatename;
     $scope.updateprice;
     $scope.updatebrand;
     $scope.showGoodById = function(_id){
      $scope.updateIsShow = true;
      //回显修改商品信息
      for (var i=0;i<$scope.goods.length;i++) {
       if ($scope.goods[i].id==_id) {
        $scope.updateGood = $scope.goods[i];
        break;
       }
      }

      $scope.updatename=$scope.updateGood.name;
      $scope.updateprice=$scope.updateGood.price;
      $scope.updatebrand=$scope.updateGood.brand;
     }

     $scope.updateGoodF = function(){
      $scope.updateIsShow = false;
      $scope.updateGood.name = $scope.updatename;
      $scope.updateGood.price = $scope.updateprice;
      $scope.updateGood.brand = $scope.updatebrand;
     }

     //批量删除
     $scope.deleteMore = function(){
      var cks = $("input[type=checkbox]:checked");
      for (var i=0;i<cks.length;i++) {
       var ck = cks[i];
       var _id = ck.value;
       for (var j=0;j<$scope.goods.length;j++) {
        if ($scope.goods[j].id ==_id) {
         $scope.goods.splice(j,1);
         break;
        }
       }
      }
     }
   });
  </script>
  <style type="text/css">
   table{
    text-align: center;
   }
   .plum{
    background-color: plum;
   }
   .pink{
    background-color: pink;
   }
  </style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   查询:<input type="text" ng-model="searchKey" />  
   排序条件:<select ng-model="orderByKey">
    <option value="">--请选择--</option>
    <option value="name">--按名字正序--</option>
    <option value="-name">--按名字倒序--</option>
    <option value="price">--按价钱正序--</option>
    <option value="-price">--按价钱倒序--</option>
    <option value="id">--按id正序--</option>
    <option value="-id">--按id倒序--</option>
   </select>
   <input type="button" value="添加" ng-click="addIsShow=true" /><br /><br />
   <div ng-show="addIsShow">
    名字:<input type="text" ng-model="newname" /><br />
    价钱:<input type="text" ng-model="newprice" /><br />
    产地:<input type="text" ng-model="newbrand" /><br />
    <input type="button" value="添加" ng-click="addNewGood();" /><br />
   </div>
   <input style="text-align: right;" type="button" value="批量删除" ng-click="deleteMore();" />
   <table width="400px" border="1px" bordercolor="plum" cellpadding="1px" cellspacing="1px">
    <tr style="background-color: paleturquoise;">
     <td><input type="checkbox" ng-model="checkall"/></td>
     <td>序号</td>
     <td>id</td>
     <td>名字</td>
     <td>价格</td>
     <td>品牌</td>
     <td>操作</td>
    </tr>
    <tr ng-repeat="g in goods |filter:searchKey | orderBy:orderByKey" class="{{$index%2==0?'plum':'pink'}}">
     <td><input type="checkbox" value="{{g.id}}" ng-model="checkall "/></td>
     <td>{{$index+1}}</td>
     <td>{{g.id}}</td>
     <td>{{g.name}}</td>
     <td>{{g.price}}</td>
     <td>{{g.brand}}</td>
     <td>
      <input type="button" value="删除" ng-click="deletGoodsById(g.id);" />
      <input type="button" value="修改" ng-click="showGoodById(g.id);" />
     </td>
    </tr>
   </table>
   <div ng-show="updateIsShow">
    名字:<input type="text" ng-model="updatename" /><br />
    价钱:<input type="text" ng-model="updateprice" /><br />
    产地:<input type="text" ng-model="updatebrand" /><br />
    <input type="button" value="确认修改" ng-click="updateGoodF();" /><br />
   </div>
  </center>
</body>
</html>