AngularJs增、删、改、查、排序、多选反选、批量删除

最新推荐文章于 2022-05-14 18:18:54 发布

fairy_414

最新推荐文章于 2022-05-14 18:18:54 发布

阅读量184

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/xw_414/article/details/79079390

版权

AngularJs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="App">

   <head>
       <meta charset="UTF-8">
       <title>月考增删改查综合练习</title>
       <script src="../libs/angular.min.js"></script>

       <script>
           var App = angular.module("App", []);
           App.controller("Demo", function($scope) {
               $scope.datas = [{
                   id: 101,
                   name: "电脑",
                   nums: 1,
                   price: 6800,
                   state: false
               }, {
                   id: 102,
                   name: "冰箱",
                   nums: 1,
                   price: 5200,
                   state: false
               }, {
                   id: 103,
                   name: "空调",
                   nums: 1,
                   price: 6100,
                   state: false
               }];

               //数量减减
               $scope.jian = function(index) {

                       if($scope.datas[index].nums <= 1) {
                           alert("数量不能为负数")
                       } else {
                           $scope.datas[index].nums--;

                       }

                   }
                   //数量加加
               $scope.jia = function(index) {
                   $scope.datas[index].nums++;
               }

               //总数量
               $scope.totalPrice = function() {
                   var to_price = 0;
                   for(var i = 0; i < $scope.datas.length; i++) {

                       to_price += $scope.datas[i].nums * $scope.datas[i].price
                   }
                   return to_price;
               }

               //总数
               $scope.totalnum = function() {
                   var to_num = 0;
                   for(var i = 0; i < $scope.datas.length; i++) {

                       to_num += $scope.datas[i].nums;

                   }
                   return to_num;
               }

               //删除单个行
               $scope.del = function(index) {
                   if(confirm("是否要删除？")) {
                       $scope.datas.splice(index, 1);
                   } else {
                       alert("已经取消删除！");
                   }
               }

               //多选框的全选反选
               $scope.selcheackAll = function() {

                   if($scope.selecheack) {
                       //判断如果是选中状态
                       for(var x = 0; x < $scope.datas.length; x++) {
                           $scope.datas[x].state = true;
                           //循环遍历里面所有选中框的状态设置为true(选中状态)
                       }
                   } else {
                       //否则遍历里面所有选中框的状态为 false（不选中状态）
                       for(var x = 0; x < $scope.datas.length; x++) {
                           $scope.datas[x].state = false;

                       }
                   }
               }

               //批量删除根据名字删除
               $scope.delselect = function() {
                   var arrs = [];

                   //遍历原始数据
                   for(var x = 0; x < $scope.datas.length; x++) {
                       //判断原始数据的状态
                       if($scope.datas[x].state) {
                           //添加到定义的空数组里
                           arrs.push($scope.datas[x].name)
                       }

                   }
                   //判断数组的长度小于等于0 ，也就是没有数据时，先提示选择
                   if(arrs.length <= 0) {
                       alert("请您选中需要删除的数据！");

                   } else {
                       //否则有数据就遍历arr数组
                       for(var x = 0; x < arrs.length; x++) {
                              //遍历原始数据
                           for(var x2 = 0; x2 < $scope.datas.length; x2++) {
                                 //判断相等时，进行删除
                               if(arrs[x] == $scope.datas[x2].name) {
                                   $scope.datas.splice(x2, 1);

                               }

                           }

                       }
                   }
               }

               //添加商品
               $scope.add = function() {
                   var falg = false;

                   //判断id非空并且必须是数字
                   if($scope.ID == "" || $scope.ID == null) {
                       falg = false;
                       alert("id不能为空！");

                       return;
                   } else if(isNaN($scope.ID)) {
                       falg = false;
                       alert("id必须是数字");
                       return;
                   } {
                       falg = true;
                   }

                   //判断姓名不能为空
                   if($scope.IDname == "" || $scope.IDname == null) {

                       flag = false;
                       alert("姓名不能为空");
                       return;
                   } else {
                       flag = true;
                   }

                   //判断数量非空，并且是数字
                   if($scope.IDnum == "" || $scope.IDnum == null) {
                       flag = false;
                       alert("数量不能为空");
                       return;
                   } else if(isNaN($scope.IDnum)) {
                       flag = false;
                       alert("数量必须是数字")
                       return;
                   } else {
                       flag = true;
                   }

                   //判断单价非空，并且是数字
                   if($scope.IDprice == "" || $scope.IDprice == null) {
                       falg = false;
                       alert("单价不能为空！");
                       return;
                   } else if(isNaN($scope.IDprice)) {
                       flag = false;
                       alert("单价必须是数字！");
                   } {
                       falg = true;
                   }

                   if(falg = true) {
                       $scope.datas.push({
                           id: $scope.ID,
                           name: $scope.IDname,
                           nums: $scope.IDnum,
                           price: $scope.IDprice

                       })
                   }

               }

               //修改
               $scope.update = function(index) {

                   up_index = index;
                   if(confirm("确认要对该商品进行修改么？")) {
                       $scope.updateShow = true;

                   }

               }
                 //确认修改的方法
               $scope.updateFun = function() {
                   $scope.datas[up_index].id = $scope.updateId;
                   $scope.datas[up_index].name = $scope.updateName;
                   $scope.datas[up_index].nums = $scope.updateNum;
                   $scope.datas[up_index].price = $scope.updatePrice;

               }

           })
       </script>

   </head>

   <body ng-controller="Demo">
       <div align="center">
       <input type="text" placeholder="请输入查询商品" ng-model="search" /> 数量排序:
       <select ng-model="selOrder">
           <option value="nums">数量正序</option>
           <option value="-nums">数量倒序</option>
       </select>
       <button ng-click="delselect()">批量删除</button>

       <table border="1" cellspacing="0" width="650px" height="180px">
           <tr>
               <td><input type="checkbox" ng-model="selecheack" ng-click="selcheackAll()" /></td>
               <td>产品编号</td>
               <td>产品名称</td>
               <td>购买数量</td>
               <td>产品单价</td>
               <td>产品总价</td>
               <td>操作</td>
           </tr>

           <tr ng-repeat="x in datas | filter:{name:search}|orderBy:selOrder">
               <td><input type="checkbox" ng-model="x.state" /></td>
               <td>{{x.id}}</td>
               <td>{{x.name}}</td>
               <td><button ng-click="jian($index)">-</button>
                   <input type="number" ng-model="x.nums" />
                   <button ng-click="jia($index)">+</button>
               </td>
               <td>{{x.price | currency:"￥"}}</td>
               <td>{{x.nums* x.price |currency:"￥"}}</td>
               <td><button ng-click="del($index)">删除</button>
                   <button ng-click="update($index)">修改</button>

               </td>
           </tr>

       </table>

       <div>
           <span>总价：{{totalPrice()}}</span>         
           <span>总数：{{totalnum()}}</span>
       </div>

       <form style="border: 2px solid black; width: 500px;height: 251px; margin-top: 20px;">
           <h3>添加商品框</h3> 商品编号： <input type="text" placeholder="请输入id" ng-model="ID" /><br /><br /> 商品名称： <input type="text" placeholder="请输入商品名称" ng-model="IDname" /><br /><br /> 商品数量： <input type="number" placeholder="请输入商品数量" ng-model="IDnum" /><br /><br /> 商品单价： <input type="number" placeholder="请输入商品单价" ng-model="IDprice" /><br /><br />
           <button ng-click="add()">添加</button>
       </form>

       <form style="border: 2px solid black; width: 500px;height: 251px; margin-top: 20px;" ng-show="updateShow">
           <h3>修改商品表</h3> 商品编号：
           <input type="text" placeholder="输入需要修改id" ng-model="updateId" /><br /><br /> 商品名称：
           <input type="text" placeholder="输入需要修改商品" ng-model="updateName" /><br /><br /> 商品数量：
           <input type="number" placeholder="输入需要修改数量" ng-model="updateNum" /><br /><br /> 商品单价：
           <input type="number" placeholder="输入需要修改的单价" ng-model="updatePrice" /><br /><br />
           <button ng-click="updateFun()">确认修改</button>
       </form>

       </div>
   </body>

</html>

fairy_414

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
AngularJs增、删、改、查、排序、多选反选、批量删除

月考增删改查综合练习 var App = angular.module("App", []); App.controller("Demo", function($scope) { $scope.datas = [{ id: 10
复制链接

扫一扫