欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular實(shí)現(xiàn)較為復(fù)雜的表格過濾，刪除功能示例

 更新時(shí)間：2017年12月23日 09:19:29   作者：qq_41073714  
這篇文章主要介紹了Angular實(shí)現(xiàn)較為復(fù)雜的表格過濾，刪除功能,結(jié)合實(shí)例形式分析了AngularJS針對(duì)表格的排序、查詢匹配、頁面元素屬性動(dòng)態(tài)修改等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Angular實(shí)現(xiàn)較為復(fù)雜的表格過濾，刪除功能。分享給大家供大家參考，具體如下：

先來看看運(yùn)行效果：

具體代碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>www.dbjr.com.cn 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:"已發(fā)貨"
               },
               {
                checked:false,
                id:12,
                name:"VIVO X20",
                user:"關(guān)羽",
                tel:15333333333,
                price:2998,
                city:"上海",
                time:new Date('08-22 10:00'),
                sta:"已發(fā)貨"
               },
               {
                checked:false,
                id:1,
                name:"iPhone 8 Plus",
                user:"曹操",
                tel:15111111111,
                price:7588,
                city:"北京",
                time:new Date('09-04 10:00'),
                sta:"已發(fā)貨"
               },
               {
                checked:false,
                id:11,
                name:"小*Note5",
                user:"黃忠",
                tel:13222222222,
                price:699,
                city:"重慶",
                time:new Date('02-28 10:00'),
                sta:"發(fā)貨"
               },
               {
                checked:false,
                id:1,
                name:"小*Mix2",
                user:"黃蓋",
                tel:13111111111,
                price:3299,
                city:"北京",
                time:new Date('03-015 10:00'),
                sta:"發(fā)貨"
               }];
               $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:"發(fā)貨"
                });
                $scope.arr = $scope.arrs;
                $scope.isc = false;
               }
      });
    </script>
  </head>
<body ng-app="MyApp" ng-controller="democ">
    <div class="d1">
      <div>
        <input type="text" placeholder="用戶名搜索" ng-change="seluser()" ng-model="reg_user"/>
        <input type="text" placeholder="手機(jī)號(hào)搜索" 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="">選擇狀態(tài)</option>
          <option value="發(fā)貨">發(fā)貨</option>
          <option value="已發(fā)貨">已發(fā)貨</option>
        </select>
        <select ng-model="selid">
          <option value="">--請(qǐng)選擇--</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="">結(jié)束月份</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>
      </div>
      <div class="d2">
        <input type="button" value="新增訂單" class="btn" ng-click="isc=true"/>
        <input type="button" value="批量發(fā)貨" class="btn"/>
        <input type="button" value="批量刪除" class="btn1" ng-click="delAll()"/>
        敏感詞:米(商品名)->替換成*
      </div>
      <div>
        <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>手機(jī)號(hào)</th>
            <th>價(jià)格</th>
            <th>城市</th>
            <th>下單時(shí)間</th>
            <th>狀態(tài)</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=='已發(fā)貨'">{{a.sta}}</span>
              <span ng-show="a.sta=='發(fā)貨'"><a href="#" rel="external nofollow" ng-click="a.sta='已發(fā)貨'">{{a.sta}}</a></span>
            </td>
            <td><input type="button" value="刪除" ng-click="del(this)"/></td>
          </tr>
        </table>
      </div>
      <div 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 />
           手機(jī)號(hào):<input type="text" ng-model="a_tel"/><br />
           價(jià)　值:<input type="text" ng-model="a_price"/><br />
          城　市:<input type="text" ng-model="a_city"/><br />
          <input type="button" value="保存" ng-click="add()"/>
      </div>
    </div>
  </body>
</html>

PS：代碼中尚有一些功能并不完善，感興趣的朋友可以自行測(cè)試修改完善一下。

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法

    使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法

    AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧
    2017-07-07
  • requirejs AngularJS結(jié)合使用示例解析

    requirejs AngularJS結(jié)合使用示例解析

    這篇文章主要為大家介紹了requirejs AngularJS結(jié)合使用示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-06-06
  • angularjs請(qǐng)求數(shù)據(jù)的方法示例

    angularjs請(qǐng)求數(shù)據(jù)的方法示例

    這篇文章主要給大家介紹了關(guān)于angularjs請(qǐng)求數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • AngularJS模塊學(xué)習(xí)之Anchor Scroll

    AngularJS模塊學(xué)習(xí)之Anchor Scroll

    這篇文章主要介紹了AngularJS模塊學(xué)習(xí)之Anchor Scroll 的相關(guān)資料,需要的朋友可以參考下
    2016-01-01
  • Angular.js基礎(chǔ)學(xué)習(xí)之初始化

    Angular.js基礎(chǔ)學(xué)習(xí)之初始化

    這篇文章主要介紹了Angular.js基礎(chǔ)學(xué)習(xí)之初始化的相關(guān)資料，AngularJS 啟動(dòng)有兩種方式，一種是綁定初始化，自動(dòng)加載，另外一種是手動(dòng)初始化，文中介紹的很詳細(xì)，需要的朋友可以參考下。
    2017-03-03
  • Javascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法

    Javascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法

    下面小編就為大家?guī)硪黄狫avascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-06-06
  • 淺談AngularJS中使用$resource（已更新）

    淺談AngularJS中使用$resource（已更新）

    這篇文章主要介紹了淺談AngularJS中使用$resource（已更新）的相關(guān)資料,需要的朋友可以參考下
    2017-09-09
  • 詳解Angular中延遲加載的原理與使用

    詳解Angular中延遲加載的原理與使用

    Angular 是一個(gè)流行的框架，用于構(gòu)建動(dòng)態(tài)和響應(yīng)式 Web 應(yīng)用程序，在本文中，我們將討論延遲加載以及它如何與 Angular 中的路由一起工作，感興趣的可以跟隨小編一起學(xué)習(xí)一下
    2023-06-06
  • 詳解Angular之constructor和ngOnInit差異及適用場(chǎng)景

    詳解Angular之constructor和ngOnInit差異及適用場(chǎng)景

    這篇文章主要介紹了詳解Angular之constructor和ngOnInit差異及適用場(chǎng)景的相關(guān)資料,有興趣的可以了解一下
    2017-06-06
  • Angular應(yīng)用的多語言設(shè)置問題解決示例

    Angular應(yīng)用的多語言設(shè)置問題解決示例

    這篇文章主要為大家介紹了Angular應(yīng)用的多語言設(shè)置問題解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-07-07

最新評(píng)論