angular 熟练使用（demo）增删改查排序

最新推荐文章于 2021-05-13 16:56:53 发布

Jonly_W

最新推荐文章于 2021-05-13 16:56:53 发布

阅读量536

点赞数

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

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
       <script type="text/javascript" src="js/angular.js" ></script>

       <script>
       var app=angular.module("myApp",[])
       app.controller("myCtrl",function($scope,$http){
           $scope.josnnet="";
           $http({
               method:"get",
               url:"http://gank.io/api/data/Android/10/1"
           }).then(function success(response){
               $scope.jsonnet=response.data;
           },function error(response){})
           //删除
           $scope.deleteG=function($index){
               $scope.jsonnet.results.splice($index,1)
           }

           $scope.mysource="";
           $scope.mytype="";
           $scope.mywho="";
           $scope.mypublishedAt=new Date();
           $scope.ifshow=false;

           $scope.isshow=function(){
              $scope.ifshow=!$scope.ifshow;
           }
           //添加信息
           $scope.myadd=function(){
               if($("#btn").val()=="添加"){
                   var stu={
                       source:$scope.mysource,
                       type:$scope.mytype,
                       who:$scope.mywho,
                       publishedAt:$scope.mypublishedAt
                   }
                   $scope.jsonnet.results.push(stu);
                   $scope.ifshow=false;
               }else{
                   $scope.jsonnet.results[$scope.count].source=$scope.mysource;
                   $scope.jsonnet.results[$scope.count].type=$scope.mytype;
                   $scope.jsonnet.results[$scope.count].who=$scope.mywho;
                   $scope.ifshow=false;

               }
           }
           $scope.count="";
           //修改的方法
           $scope.alertG=function($index){
               $scope.count=$index;
               $scope.ifshow=true;
               $("#btn").val("修改");
                   $scope.mysource=$scope.jsonnet.results[$index].source;
                  $scope.mytype=$scope.jsonnet.results[$index].type;
                  $scope.mywho=$scope.jsonnet.results[$index].who;
           }
           $scope.deletemore=function($index){
               $scope.jsonnet.results[$index].ch=!$scope.jsonnet.results[$index].ch;
           }
           $scope.deleteall=function(){
               var v=$scope.ch;
               if(v){
                   for (var i=v.$scope.jsonnet.results.length-1;i>=0;i--) {
                       $scope.jsonnet.results.splice(i,1)
                   }
               }

                   for (var i=$scope.jsonnet.results.length-1;i>=0;i--) {
                       if($scope.jsonnet.results[i].ch){
                           $scope.jsonnet.results.splice(i,1)
                       }
                   }

           }
           //排序的order
           $scope.orderkey="";
           $scope.ordername="";
       })


       </script>
       <style>
           tr{text-align: center;}
           span{color: red;}
       </style>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center >
           排序：<select ng-model="orderkey">
               <option value="publishedAt">日期小到大</option>
               <option value="-publishedAt">日期大到小</option>
           </select>
           <input type="text" placeholder="请输入姓名迷糊查询" ng-model="ordername" />
           
           <input type="button" value="展示添加页面" ng-click="isshow()" />
           
           <input type="button" value="批量删除" ng-click="deleteall()" />
           <table border="1" width="1000px">
               <tr>
                   <th><input type="checkbox" ng-model="ch"/></th><th>序号</th><th>source</th><th>type</th><th>who</th><th>publishedAt</th><th>操作</th>
               </tr>
               <tr ng-repeat="g in jsonnet.results | orderBy:orderkey | filter:ordername">
                   <td><input type="checkbox" ng-checked="ch" ng-click="deletemore($index)"/></td>
                   <td>{{$index}}</td>
                   <td>{{g.source}}</td>
                   <td>{{g.type}}</td>
                   <td>{{g.who}}</td>
                   <td>{{g.publishedAt | date:"yyyy-MM-dd hh:mm:ss"}}</td>
                   <td>
                       <input type="button" value="删除" ng-click="deleteG($index)"/>
                       <input type="button" value="修改" ng-click="alertG($index)" />
                   </td>
               </tr>
           </table>
            
           <hr width="100%" color="red"/>
           <form name="myfrom" ng-show="ifshow">
               <input type="text" name="mysource" placeholder="请输入source"   ng-model="mysource" required=""/>
               <span ng-show="myfrom.mysource.$error.required">不能为空</span><br />
               
               <input type="text" name="mytype" placeholder="请输入type"   ng-model="mytype" required=""/>
               <span ng-show="myfrom.mytype.$error.required">不能为空</span><br />
               
               <input type="text" name="mywho" placeholder="请输入who"   ng-model="mywho" required=""/>
               <span ng-show="myfrom.mywho.$error.required">不能为空</span><br />
               <input type="button" value="添加" id="btn" ng-click="myadd()"/>
           </form>
       </center>
   </body>
</html>

Jonly_W

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
angular 熟练使用（demo）增删改查排序

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

扫一扫