二级联动，增删改查，时间，顺序排序（全面型）

最新推荐文章于 2019-03-10 18:21:00 发布

刘书门第

最新推荐文章于 2019-03-10 18:21:00 发布

阅读量348

点赞数 1

本文链接：https://blog.csdn.net/qq_41442084/article/details/80158978

版权

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="libs/angular.min.js" ></script>
  <script type="text/javascript" src="libs/jquery-1.11.0.min.js" ></script>
  <script>
   var app = angular.module("myApp", []);
   app.controller("myCtrl", function($scope) {
    //定义二级联动数据
    $scope.types = [{
     fei: "厨房用具",
     zai: ["做菜必备", "清洗工具", "刀具"]
    }, {
     fei: "生活用品",
     zai: ["卫生工具", "洗漱用品", "黑科技"]
    }, {
     fei: "食品",
     zai: ["散装", "膨化食品", "饼干"]
    }, {
     fei: "饮品",
     zai: ["碳酸性饮料", "果汁饮料", "红酒", "白酒", "啤酒"]
    }];

    $scope.cargo = $scope.types[0].zai;
    $scope.changcargo = function(fei) {
     $scope.cargo = fei.zai
    }

    //模拟数据
    $scope.goods = [{
     name: "一品鲜酱油",
     price: 25,
     num: 50,
     fenlie: "厨房用具做菜必备",
     ccdate: new Date("2018-04-04")
    }, {
     name: "江小白",
     price: 28,
     num: 30,
     fenlie: "饮品白酒",
     ccdate: new Date("2018-04-05")
    }, {
     name: "乐事薯片",
     price: 4,
     num: 10,
     fenlie: "食品膨化食品",
     ccdate: new Date("2018-03-18")
    }];
    $scope.searchKey = "";
    //添加
    $scope.add = function() {
     var stus = {};
     if($scope.name == "" || $scope.name == null) {//商品名称校验
      $scope.showName = true;
      return;
     } else {
      stus.name = $scope.name;
      $scope.showName = false;
     }
     if($scope.price == null) {//价格校验
      $scope.showPrice = true;
      return;
     } else {
      stus.price = $scope.price,
       $scope.showPrice = false;
     }
     if($scope.num == null) {//数量校验
      $scope.showNum = true;
      return;
     } else {
      stus.num = $scope.num,
       $scope.showNum = false;
     }
     if ($scope.ccdate == null) {
      $scope.showDate = true;
      return;
     }else{
      stus.ccdate = $scope.ccdate;
      $scope.ccdate = false;
     }
     stus.fenlie = $scope.g1.fei + $scope.g2;
     $scope.goods.push(stus);
     //添加隐藏
     $scope.showAdd = false;
    }
    //批量删除
    $scope.batch_del = function() {
     for(var i = 0; i < $scope.types.length; i++) {
      if($scope.goods[i].ck) {
       $scope.goods.splice(i, 1);
       i--;
      }
     }
    }
    //全/反选
    $scope.xuan = function() {
     for(var i = 0; i < $scope.goods.length; i++) {
      $scope.goods[i].ck = !$scope.goods[i].ck;
     }
    }
    //点击复选框，实现全选
    $scope.All = function() {
     for(var i = 0; i < $scope.goods.length; i++) {
      $scope.goods[i].ck = $scope.check;
     }
    }
    //删除
    $scope.del = function(i) {
     $scope.goods.splice(i, 1);
    }
    //商品价格总计
    $scope.getTotalPrice = function() {
     var toa = 0;
     for(var i = 0; i < $scope.goods.length; i++) {
      toa += ($scope.goods[i].price * $scope.goods[i].num)
     }
     return toa;
    }
    //修改
    var upstu = "";
    //点击修改按钮判断
    $scope.update = function(gname){
     for (var i = 0; i < $scope.goods.length; i++) {
      if ($scope.goods[i].name == gname) {
       $scope.showUpdate = true;//显示要修改的信息
       upstu = $scope.goods[i];
       break;
      }
     }
     //回显
     $scope.upname = upstu.name;
     $scope.upprice = upstu.price;
     $scope.upnum = upstu.num;
     $scope.upfenlie = upstu.fenlie;
     $scope.upccdate = upstu.ccdate;
    }
    //修改之后，修改信息消失
    $scope.tjUpdate = function(){
     upstu.name = $scope.upname;
     upstu.price = $scope.upprice;
     upstu.num = $scope.upnum;
     upstu.fenlie = $scope.upfenlie;
     upstu.ccdate = $scope.upccdate;
     $scope.showUpdate = false;
    }
   });
  </script>
  <style>
   span {
    color: red;
   }

   td {
    width: 100px;
    height: 50px;
    text-align: center;
   }

   .blue {
    background-color: deepskyblue;
   }

   .purple {
    background-color: mediumpurple;
   }
  </style>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <center>
   <button style="background-color: paleturquoise;" ng-click="showAdd = !showAdd">添加</button>
   <button style="background-color: lightpink;" ng-click="batch_del()">批量删除</button>
   <div ng-show="showAdd">
    商品名称：<input type="text" ng-model="name" placeholder="请输入商品名称" /><span ng-show="showName">商品名称不可空</span><br /> 商品价格：
    <input type="number" ng-model="price" placeholder="请输入商品名称价格" /><span ng-show="showPrice">价格不可空</span><br /> 商品数量：
    <input type="number" ng-model="num" placeholder="请输入商品名称数量" /><span ng-show="showNum">数量不可空</span><br /> 商品类型：
    <select ng-init="g1=types[0]" ng-model="g1" ng-options="t.fei for t in types" ng-change="changcargo(g1)">
     <option value="">---请选择---</option>
    </select><br /> 小分类：
    <select ng-init="g2=cargo[0]" ng-model="g2" ng-options="c for c in cargo">
     <option value="">---请选择---</option>
    </select><br />
    出产日期：<input type="date" ng-model="ccdate" /><span ng-show="showDate">请输入出产日期</span><br />
    <button ng-click="add()">确认添加</button>
   </div>
   <button ng-click="xuan()" style="background: #F0FFF0;">全选/反选</button> 查询：
   <input type="text" placeholder="请输入关键字查询" ng-model="searchKey" /> 排序：
   <select ng-model="orderKey">
    <option value="">---请选择---</option>
    <option value="name">名称正序</option>
    <option value="-name">名称倒序</option>
    <option value="price">价格正序</option>
    <option value="-price">价格倒序</option>
   </select>
   <table border="1px" >
    <tr style="background-color: #F0FFF0;">
     <td><input type="checkbox" ng-click="All()" ng-model="check" /></td>
     <td>商品名称</td>
     <td>商品价格</td>
     <td>商品数量</td>
     <td>商品类别</td>
     <td>商品小计</td>
     <td>出产日期</td>
     <td>操作</td>
    </tr>
    <tr ng-repeat=" g in goods | filter : searchKey | orderBy : orderKey" class="{{$index%2? 'blue':'purple'}}">
     <td><input type="checkbox" ng-model="g.ck" /></td>
     <td>{{g.name}}</td>
     <td>{{g.price}}</td>
     <td>{{g.num}}</td>
     <td>{{g.fenlie}}</td>
     <td>{{g.count = g.price * g.num}}</td>
     <td>{{g.ccdate | date :"yyyy-MM-dd"}}</td>
     <td>
      <button ng-click="del($index)">删除</button>
      <button ng-click="update(g.name)">修改</button>
     </td>
    </tr>
    <h3>商品总价是：{{getTotalPrice()}}</h3>
   </table>
   <div ng-show="showUpdate">
    商品名称：<input type="text" ng-model="upname" /><br />
    商品价格：<input type="number" ng-model="upprice" /><br />
    商品数量：<input type="number" ng-model="upnum" /><br />
    商品类型：<input type="text" ng-model="upfenlie" /><br />
    出产日期：<input type="date" ng-model="upccdate" /><br />
    <input type="button" value="提交修改" ng-click="tjUpdate()"/>
   </div><br />
  </center>
</body>

</html>

刘书门第

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
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 type="text/javascript" src="libs/angular.min.js" &gt
复制链接

扫一扫