Maison  >  Article  >  interface Web  >  Angular implémente des fonctions de filtrage et de suppression de tables

Angular implémente des fonctions de filtrage et de suppression de tables

php中世界最好的语言
php中世界最好的语言original
2018-04-13 17:11:441920parcourir

Cette fois, je vais vous présenter Angular pour implémenter les fonctions de filtrage et de suppression de tables. Quelles sont les précautions pour qu'Angular implémente les fonctions de filtrage et de suppression de tables. Ce qui suit est un cas pratique, prenons. un regard.

Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>www.jb51.net Angular过滤、删除</title>
    <style>
      table{
        border: 1px solid black;
        width: 800px;
      }
      td , th{
        border: 1px solid black;
        text-align: center;
      }
      th{
        background: #767674;
      }
      .d1{
        width: 50%;
        margin: 0 auto;
      }
      .d2{
        margin-top: 10px;
      }
      .btn{
        background: green;
        color: white;
      }
      .btn1{
        background: red;
        color: white;
      }
      tr:nth-child(2n){
        background-color: gainsboro;
      }
    </style>
    <script src="angular.min.js"></script>
    <script type="text/javascript" src="jquery-1.9.1.min.js" ></script>
    <script>
      angular.module("MyApp",[])
      .controller("democ",function($scope,$filter){
        $scope.isc = false;
        $scope.arrs = [{
                checked:false,
                id:7,
                name:"OPPO R9s",
                user:"赵云",
                tel:15777777777,
                price:4999,
                city:"北京",
                time:new Date('03-09 10:00'),
                sta:"已发货"
               },
               {
                checked:false,
                id:12,
                name:"VIVO X20",
                user:"关羽",
                tel:15333333333,
                price:2998,
                city:"上海",
                time:new Date('08-22 10:00'),
                sta:"已发货"
               },
               {
                checked:false,
                id:1,
                name:"iPhone 8 Plus",
                user:"曹操",
                tel:15111111111,
                price:7588,
                city:"北京",
                time:new Date('09-04 10:00'),
                sta:"已发货"
               },
               {
                checked:false,
                id:11,
                name:"小*Note5",
                user:"黄忠",
                tel:13222222222,
                price:699,
                city:"重庆",
                time:new Date('02-28 10:00'),
                sta:"发货"
               },
               {
                checked:false,
                id:1,
                name:"小*Mix2",
                user:"黄盖",
                tel:13111111111,
                price:3299,
                city:"北京",
                time:new Date('03-015 10:00'),
                sta:"发货"
               }];
               $scope.arr = $scope.arrs;
               $scope.seluser = function(){
                 $scope.arr = [];
                 var val = $scope.reg_user;
                 var f = $filter("filter");
                 $scope.arr = f($scope.arrs,{"user":val});
               }
               $scope.seltel = function(){
                 $scope.arr = [];
                 var val = $scope.reg_tel;
                 var f = $filter("filter");
                 $scope.arr = f($scope.arrs,{"tel":val});
               }
               $scope.selsta = function(){
                $scope.arr = [];
                var val = $scope.reg_sta;
                var f = $filter("filter");
                $scope.arr = f($scope.arrs,{"sta":val});
               }
               $scope.ckAll = function(){
                var ck = $scope.sta_ck;
                for(var i=0; i<$scope.arrs.length; i++){
                  $scope.arrs[i].checked = ck;
                }
               }
               $scope.del = function(th){
                $scope.arrs.splice(th,1);
               }
               $scope.delAll = function(){
                for(var i=0; i<$scope.arrs.length; i++){
                  if($scope.arrs[i].checked==true){
                    $scope.arrs.splice(i,1);
                    i--;
                  }
                }
               }
               $scope.add = function(){
                var d=new Date();
                $scope.arrs.push({
                  checked:false,
                  id:$scope.a_id,
                  name:$scope.a_name,
                  user:$scope.a_user,
                  tel:$scope.a_tel,
                  price:$scope.a_price,
                  city:$scope.a_city,
                  time:d,
                  sta:"发货"
                });
                $scope.arr = $scope.arrs;
                $scope.isc = false;
               }
      });
    </script>
  </head>
<body ng-app="MyApp" ng-controller="democ">
    <p class="d1">
      <p>
        <input type="text" placeholder="用户名搜索" ng-change="seluser()" ng-model="reg_user"/>
        <input type="text" placeholder="手机号搜索" ng-change="seltel()" ng-model="reg_tel"/>
        <select>
          <option>选择城市</option>
          <option>北京</option>
          <option>上海</option>
          <option>广州</option>
        </select>
        <select ng-change="selsta()" ng-model="reg_sta">
          <option value="">选择状态</option>
          <option value="发货">发货</option>
          <option value="已发货">已发货</option>
        </select>
        <select ng-model="selid">
          <option value="">--请选择--</option>
          <option value="id">ID正序</option>
          <option value="-id">ID倒叙</option>
        </select>
        <select ng-model="selmonth">
          <option value="">开始月份</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        <select ng-model="lastmonth">
          <option value="">结束月份</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
      </p>
      <p class="d2">
        <input type="button" value="新增订单" class="btn" ng-click="isc=true"/>
        <input type="button" value="批量发货" class="btn"/>
        <input type="button" value="批量删除" class="btn1" ng-click="delAll()"/>
        敏感词:米(商品名)->替换成*
      </p>
      <p>
        <table cellpadding="0" cellspacing="0">
          <tr>
            <th><input type="checkbox" ng-change="ckAll()" ng-model="sta_ck"/></th>
            <th>ID</th>
            <th>商品名</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>价格</th>
            <th>城市</th>
            <th>下单时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          <tr ng-repeat="a in arr|orderBy : selid | filter:{time:selmonth} | filter:{time:lastmonth}">
            <td><input type="checkbox" ng-model="a.checked"/></td>
            <td>{{a.id}}</td>
            <td>{{a.name}}</td>
            <td>{{a.user}}</td>
            <td>{{a.tel}}</td>
            <td>{{a.price|currency : '¥'}}</td>
            <td>{{a.city}}</td>
            <td>{{a.time|date : 'MM-HH hh:dd:ss'}}</td>
            <td>
              <span ng-show="a.sta==&#39;已发货&#39;">{{a.sta}}</span>
              <span ng-show="a.sta==&#39;发货&#39;"><a href="#" rel="external nofollow" ng-click="a.sta=&#39;已发货&#39;">{{a.sta}}</a></span>
            </td>
            <td><input type="button" value="删除" ng-click="del(this)"/></td>
          </tr>
        </table>
      </p>
      <p ng-show="isc">
           I D:<input type="text" ng-model="a_id"/><br />
           商品名:<input type="text" ng-model="a_name"/><br />
           用户名:<input type="text" ng-model="a_user"/><br />
           手机号:<input type="text" ng-model="a_tel"/><br />
           价 值:<input type="text" ng-model="a_price"/><br />
          城 市:<input type="text" ng-model="a_city"/><br />
          <input type="button" value="保存" ng-click="add()"/>
      </p>
    </p>
  </body>
</html>

PS : Il y a encore certaines fonctions dans le code qui ne sont pas parfaites. Les amis intéressés peuvent les tester et les modifier par eux-mêmes.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

springmvc implémente un intercepteur d'annotations

anime.js crée une case à cocher animée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn