angular 使用小技巧增删改全选

最新推荐文章于 2021-04-16 09:22:24 发布

Jonly_W

最新推荐文章于 2021-04-16 09:22:24 发布

阅读量251

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/Jonly_W/article/details/79068780

版权

angular 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/angular-route.js" ></script>
       <script type="text/javascript" src="js/angular.js" ></script>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
       <script>
           var app=angular.module("myApp",[])
           app.controller("myCtrl",function($scope,$http){
               $scope.jsonnet="";

               $http({
                   method:"get",
                   url:"http://result.eolinker.com/pWEDzFn48fd146c3a725c1571f997a44281b94d1201b661?uri=myjson1"
               }).then(function success(response){
                   $scope.jsonnet=response.data;
               },function error(response){})
               $scope.ifshow=false;
               $scope.showtable=function(){
                  //添加信息的框显示
                  $scope.ifshow=!$scope.ifshow;
               }
               //定影两个变量
               $scope.mytitle="";
               $scope.mysummary="";
               //修改时的数组下标
               $scope.alertindex="";

               //判断按钮是添加还是修改
               $scope.myadd=function(){

                  if($("#btn").val()=="添加"){
                      var stu={
                      detectionItem:$scope.mytitle,
                      detectionInfo:$scope.mysummary
                  }
                  $scope.jsonnet.data.push(stu);
                  $scope.ifshow=false;
                  }else{
                      //不是添加就把输入框的值赋值给相同index的数据
                      $scope.jsonnet.data[$scope.alertindex].detectionItem=$scope.mytitle;
                      $scope.jsonnet.data[$scope.alertindex].detectionInfo=$scope.mysummary;
                      $scope.ifshow=false;
                  }



               }
               //删除
               $scope.deleteG=function($index){

                  $scope.jsonnet.data.splice($index,1)
               }

               //修改的方法
               $scope.alertG=function($index){
                  //把框显示出来
                  $scope.ifshow=true;
                  //获取到修改的下标值
                  $scope.alertindex=$index;
                  //把添加的字更改为修改
                  $("#btn").val("修改")
                  //获取到修改的值把值给到输入框
                  $scope.mytitle=$scope.jsonnet.data[$index].detectionItem;
                  $scope.mysummary=$scope.jsonnet.data[$index].detectionInfo;

               }
               //全选
                   $scope.btn2=function(){

                               var v = $("input[type='checkbox']");
                   //alert(v.length);
                                   for(var i=0 ; i<v.length ; i++){
                                          if(v[i].checked == true){
                                                 for(var j = 0; j < v.length; j++) {
                                                     v[i].checked = !v[j].checked;
                                                       }
                                                       }else {
                                                           for(var z = 0; z < v.length; z++) {
                                                           v[i].checked = true;
                                                       }
                                                           }
                                              }

                   };


           })



       </script>
       <style>
           tr{
               text-align: center;
           }
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           
           <input type="button" value="显示添加信息框" ng-click="showtable()" />
           <input type="button" value="全选/反选" ng-click="btn2()" />
           
           <table border="1" width="1000px">
          <tr>
              <th><input type="checkbox" ng-model="aa"/></th><th>序号</th><th>title</th><th>summary</th><th>操作</th>
          </tr>
          <tr ng-repeat="g in jsonnet.data">
              <td><input type="checkbox" ng-model="aa" /></td>
              <td>{{$index}}</td>
              <td>{{g.detectionItem}}</td>
              <td>{{g.detectionInfo}}</td>
              <td>
                  <input type="button" value="删除" ng-click="deleteG($index);"/>
                  <input type="button" value="修改" ng-click="alertG($index)" />

              </td>
          </tr>
       </table>
       
       <hr width="100%" />
       
       <table border="1" width="300px" ng-show="ifshow">
          <tr>
              <td>title</td>
              <td><input type="text" ng-model="mytitle"/></td>
          </tr>
          <tr>
              <td>summary</td>
              <td><input type="text" ng-model="mysummary"/></td>
          </tr>
          <tr>
              <td colspan="2">
                  <input type="button" value="添加" id="btn" ng-click="myadd()"/>
              </td>

          </tr>
       </table>
       </center>

   </body>
</html>