选中按钮删除

最新推荐文章于 2022-03-07 20:49:30 发布

祁凯凯

最新推荐文章于 2022-03-07 20:49:30 发布

阅读量685

点赞数

本文链接：https://blog.csdn.net/qikaikai0324/article/details/78853885

版权

    <!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <script type="text/javascript" src="js/angular.js">
       style
       </script>
       <script type="text/javascript">
           var app = angular.module("myApp", []);
           app.controller("myCtrl", function($scope, $http) {
               $http({
                   mothod: "get",
                   url: "zuoye.json"

               }).then(function chenggong(response) {

                   console.log(response.data);
                   $scope.dian = response.data

               }, function shibai() {
                   alert("失败")

               });

               $scope.update = function(n) {

                   if(window.confirm("确认要修改价格？")) {

                       var p = window.prompt("请输入修改的价格", n.price);
                       if(isNaN(p)) {
                           alert("输入有误")
                       } else {

                           n.price = p;
                       }
                   }

               }

               $scope.pi = function() {

                   var arr = [];
                   for(n in $scope.dian) {
                       if($scope.dian[n].state) {
                           arr.push($scope.dian[n].name);

                       }
                   }
                   if(arr.length <= 0) {
                       alert("请选择")

                   } else {

                       if(window.confirm("确认要删除？")) {
                           for(a in arr) {

                                   for(index in $scope.dian)
                                   {

                                       if(arr[a] == $scope.dian[index].name)
                                               {
                                           $scope.dian.splice(index, 1)
                                                   }
                                   }

                           }

                       }
                   }
               }

               //shanchu

               $scope.del = function(name, state) {
                   if(state) {
                       if(window.confirm("确定要删除" + name + "么")) {
                           //alert(state);

                           for(index in $scope.dian) {
                               if(name == $scope.dian[index].name) {

                                   $scope.dian.splice(index, 1);
                               }

                           }
                       }

                   } else {
                       alert("请选择");
                   }

               }
               $scope.flag = "";
               $scope.lie = "num"

               $scope.paixu = function(nubmer) {

                   $scope.lie = nubmer;
                   if($scope.flag = "") {
                       $scope.flag = "-"

                   } else {

                       scope.flag = ""
                   }

               }

               //全选
               $scope.selectAll = false;
               $scope.selectAllFun = function() {
                   if($scope.selectAll) {
                       for(index in $scope.dian) {
                           $scope.dian[index].state = true;
                       }
                   } else {

                       for(index in $scope.dian) {
                           $scope.dian[index].state = false;
                       }
                   }

               }
               //反选

$scope.dan=function(){

   var flag=false;
   for(index in $scope.dian){
       if(!$scope.dian[index].state){
           flag=true;

       }

       if(flag)
       {
           $scope.selectAll=false

       }else{

           $scope.selectAll=true;
       }
   }
}
           });

           //反选
       </script>
       <title></title>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <input type="text" placeholder="产品名称" ng-model="cha" /> 排序
           <select ng-model="sel">
               <option value="">排序方式</option>
               <option value="num">id正序</option>
               <option value="-num">id到序</option>
               <option value="price">价格正序</option>
               <option value="-price">价格倒xu</option>

           </select>
           <button ng-click="pi()">批量删除</button>
           <fieldset id="">
               <legend>添加商品列表</legend>
               <table border="1" cellspacing="0" cellpadding="10" style="margin-top: 30px;">
               <tr>
                   <th>
                       <input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /></th>
                   <th ng-click=" paixu( 'num') ">产品编号</th>
                   <th ng-click="paixu( 'name') ">产品名称</th>
                   <th ng-price="paixu( 'price') ">产品价格</th>
                   <th>操作</th>

               </tr>
               <tr ng-repeat=" n in dian | filter:{ 'name': cha} | orderBy:sel ">
                   <td><input type="checkbox" ng-model="n.state" ng-click="dan()" /></td>
                   <td>{{n.num}}</td>
                   <td>{{n.name}}</td>
                   <td>{{n.price | currency :"(RMA) "}}</td>
                   <td><button ng-click="del(n.name,n.state) ">删除</button><button ng-click="update(n) ">修改</button></td>
               </tr>
           </table>

           </fieldset>

       </center>

   </body>

</html>

祁凯凯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选中按钮删除

style var app = angular.module("myApp", []); app.controller("myCtrl", function($scope, $http) { $http({ mothod: "get
复制链接

扫一扫