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

Angular實(shí)現(xiàn)的table表格排序功能完整示例

 更新時(shí)間:2017年12月22日 11:08:51   作者:qq_41073714  
這篇文章主要介紹了Angular實(shí)現(xiàn)的table表格排序功能,結(jié)合完整實(shí)例形式分析了AngularJS表格排序所涉及的事件響應(yīng)、元素遍歷、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了Angular實(shí)現(xiàn)的table表格排序功能。分享給大家供大家參考,具體如下:

先來看看效果圖:

完整代碼如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>www.dbjr.com.cn Angular表格排序</title>
    <style>
      table{
        border: 1px solid;
        text-align: center;
        width: 40%;
        height: 400px;
      }
      tr,td{
        border: 1px solid;
      }
      tr:nth-child(2n){
        background: gainsboro;
      }
    </style>
    <script type="text/javascript" src="js/angular.min.js" ></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js" ></script>
    <script>
      var app=angular.module("MyApp",[]);
      app.controller("demoC",["$scope",function($scope){
        $scope.shop=[{ state1:false,id:9001,name:"iphoneX",username:"張三",tel:13525565588,price:8699,city:"北京",time:new Date('11-23 10:00:00'),state:"已發(fā)貨"},
        {state1:false,id:3007,name:"iphone6",username:"王紅",tel:18524565588,price:5635,city:"鄭州",time:new Date('11-23 11:38:20'),state:"已發(fā)貨"},
        {state1:false,id:5312,name:"iphone7",username:"趙小龍",tel:17545585598,price:6180,city:"北京",time:new Date('11-23 9:17:00'),state:"未發(fā)貨"},
        {state1:false,id:2132,name:"iphone8",username:"趙強(qiáng)",tel:17625565618,price:7190,city:"上海",time:new Date('11-23 10:40:00'),state:"未發(fā)貨"}
        ];
        $scope.ckAll=function(){
          for(var i in $scope.shop){
            $scope.shop[i].state1=$scope.ckall;
          }
        }
        $scope.del=function(){
            for(var i=0; i<$scope.shop.length; i++){
              if($scope.shop[i].state=="已發(fā)貨"&&$scope.shop[i].state){
                $scope.shop.splice(i,1);
                i--;
                }
                }
        }
        $scope.add=function(){
          var sname=$scope.sname;
          var susername=$scope.susername;
          var stel=$scope.stel;
          var sprice=$scope.sprice;
          var scity=$scope.scity;
          if(sname==undefined || sname==""){
            alert("用戶名不能為空");
            $("#s").css("border-color","red");
          }else if(susername==undefined || susername==""){
            alert("商品名不能為空");
            $("#y").css("border-color","red");
          }else if(stel==undefined || stel==""){
            alert("手機(jī)號(hào)不能為空");
            $("#t").css("border-color","red");
          }else if(sprice==undefined || sprice==""){
            alert("價(jià)格不能為空");
            $("#p").css("border-color","red");
          }else if(scity==undefined || scity==""){
            alert("城市必須選擇");
          }
          else{
            $scope.shop.push({name:sname,username:susername,tel:stel,price:sprice,city:scity})
            $scope.toto=false;
          }
        }
      }])
    </script>
  </head>
  <body ng-app="MyApp" ng-controller="demoC">
    <button ng-click="toto=true" style="background-color: greenyellow;">新增訂單</button>
    <button ng-click="del()" style="background-color: greenyellow;">批量刪除</button>
    <input type="text" placeholder="按商品名稱查詢" ng-model="selname" />
    <input type="text" placeholder="按手機(jī)號(hào)查詢" ng-model="seltel"/>
    <select ng-model="selstate">
      <option value="">按狀態(tài)查詢</option>
      <option value="已發(fā)貨">已發(fā)貨</option>
      <option value="未發(fā)貨">未發(fā)貨</option>
    </select>
    <table cellpadding="0px" cellspacing="0px">
      <tr style="background-color: gray;">
        <td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></td>
        <td>id<button ng-click="px='id';flag=!flag" style="background-color: greenyellow;">排序</button></td>
        <td>商品名</td>
        <td>用戶名</td>
        <td>手機(jī)號(hào)</td>
        <td>價(jià)格<button ng-click="px='price';flag=!flag" style="background-color: greenyellow;">排序</button></td>
        <td>城市</td>
        <td>下單時(shí)間<button ng-click="px='time';flag=!flag" style="background-color: greenyellow;">排序</button></td>
        <td>狀態(tài)</td>
      </tr>
      <tr ng-repeat="s in shop | filter:{name:selname} | filter:{tel:seltel} | filter:{state:selstate} | orderBy:px:flag ">
        <td><input type="checkbox" ng-model="s.state1"></td>
        <td>{{s.id}}</td>
        <td>{{s.name}}</td>
        <td>{{s.username}}</td>
        <td>{{s.tel}}</td>
        <td>{{s.price | currency:"¥"}}</td>
        <td>{{s.city}}</td>
        <td>{{s.time | date : 'MM-HH hh:dd:ss'}}</td>
        <td><span ng-show="s.state=='已發(fā)貨'" style="color: greenyellow;">{{s.state}}</span>
              <span ng-show="s.state=='未發(fā)貨'" style="color: yellow;"><a href="#" rel="external nofollow" ng-click="s.state='已發(fā)貨'">{{s.state}}</a></span></td>
      </tr>
    </table>
    <div style="margin-top: 50px; margin-left: 100px;">
      <form ng-show="toto">
        商品名:<input type="text" / ng-model="sname" id="s"><br /><br />
      用戶名:<input type="text" ng-model="susername"id="y"/><br /><br />
      手機(jī)號(hào):<input type="text" ng-model="stel" id="t"/><br /><br />
      價(jià)格為:<input type="text" ng-model="sprice" id="p"/><br /><br />
      城市:<select ng-model="scity">
        <option value="">--選擇城市--</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="鄭州">鄭州</option>
      </select><br /><br />
      <button ng-click="add()">保存</button>
      </form>
    </div>
  </body>
</html>

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

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

相關(guān)文章

  • AngularJS 過濾與排序詳解及實(shí)例代碼

    AngularJS 過濾與排序詳解及實(shí)例代碼

    這篇文章主要介紹了AngularJS 過濾與排序,這里整理了詳細(xì)的資料及簡單實(shí)例代碼,有需要的小伙伴可以參考下
    2016-09-09
  • 在AngularJS中使用jQuery的zTree插件的方法

    在AngularJS中使用jQuery的zTree插件的方法

    這篇文章主要介紹了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但還不是完全版的jQuery,需要的朋友可以參考下
    2016-04-04
  • 深究AngularJS之ui-router詳解

    深究AngularJS之ui-router詳解

    本篇文章主要介紹了深究AngularJS之ui-router詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-06-06
  • Angular中封裝fancyBox(圖片預(yù)覽)遇到問題小結(jié)

    Angular中封裝fancyBox(圖片預(yù)覽)遇到問題小結(jié)

    這篇文章主要介紹了Angular中封裝fancyBox(圖片預(yù)覽)遇到的問題小結(jié),需要的朋友可以參考下
    2017-09-09
  • Angular.js中控制器之間的傳值詳解

    Angular.js中控制器之間的傳值詳解

    angular中每個(gè)controller(控制器)都會(huì)有自己的$scope,通過為這個(gè)對(duì)象添加屬性賦值,就可以將數(shù)據(jù)傳遞給模板進(jìn)行渲染,每個(gè)$scope只會(huì)在自己控制器內(nèi)起作用,而有時(shí)候需要用到其他控制器中的數(shù)據(jù)就要考慮到控制器之間參數(shù)的傳遞了,下面來看看詳細(xì)的介紹。
    2017-04-04
  • Angular 4依賴注入學(xué)習(xí)教程之Injectable裝飾器(六)

    Angular 4依賴注入學(xué)習(xí)教程之Injectable裝飾器(六)

    這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之Injectable裝飾器的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來跟著小編一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-06-06
  • Angular4學(xué)習(xí)教程之HTML屬性綁定的方法

    Angular4學(xué)習(xí)教程之HTML屬性綁定的方法

    這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)教程之HTML屬性綁定的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-01-01
  • 模板視圖和AngularJS之間沖突的解決方法

    模板視圖和AngularJS之間沖突的解決方法

    這篇文章主要介紹了模板視圖和AngularJS之間沖突的解決方法,結(jié)合實(shí)例形式分析了AngularJS模板視圖沖突的原因并給出了2種解決方法供大家參考使用,需要的朋友可以參考下
    2016-11-11
  • AngularJS數(shù)據(jù)源的多種獲取方式匯總

    AngularJS數(shù)據(jù)源的多種獲取方式匯總

    在AngularJS中獲取數(shù)據(jù)源的方式有很多種,本文給大家整理幾種獲取數(shù)據(jù)源的方式,對(duì)angularjs獲取數(shù)據(jù)源的方式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2016-02-02
  • Angular中的ActivatedRoute和Router原理解釋

    Angular中的ActivatedRoute和Router原理解釋

    這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04

最新評(píng)論