您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)angular.js如何實(shí)現(xiàn)列表orderby排序的方法,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
JS是JavaScript的簡(jiǎn)稱(chēng),它是一種直譯式的腳本語(yǔ)言,其解釋器被稱(chēng)為JavaScript引擎,是瀏覽器的一部分,主要用于web的開(kāi)發(fā),可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果,讓網(wǎng)頁(yè)更加美觀。
如下所示:
<html ng-app> <head> <title>order by</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link href="../book/css/bootstrap.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="../file/angular-1.0.1.min.js" type="text/javascript"></script> </head> <body> <div class="table-responsive" ng-controller="demoController"> <table id="tb" class="table table-bordered table-hover"> <thead> <tr> <th class="col-md-2">編號(hào)</th> <th class="col-md-4">國(guó)家</th> <th class="col-md-4">名稱(chēng)</th> <th class="col-md-3">年齡</th> </tr> </thead> <tbody id="tbody" ng-repeat="stu in data | orderBy : '-age' | limitTo: 10"> <tr class="{{ cls($index) }}"> <td>{{ $index + 1 }}</td><td>{{ stu.country }}</td><td>{{ stu.name }}</td><td>{{ stu.age }}</td> </tr> </tbody> </table> </div> <script type="text/javascript"> function demoController($scope,$window) { $scope.data = [ { seq: 1, name: "魏國(guó)", country: "曹操",age : 45 }, { seq: 2, name: "魏國(guó)", country: "張遼" ,age: 34}, { seq: 3, name: "魏國(guó)", country: "司馬懿" ,age: 36 }, { seq: 4, name: "魏國(guó)", country: "夏侯淳",age: 40 }, { seq: 5, name: "蜀國(guó)", country: "劉備",age: 50 }, { seq: 6, name: "蜀國(guó)", country: "關(guān)羽",age: 45 }, { seq: 7, name: "蜀國(guó)", country: "張飛",age: 46 }, { seq: 8, name: "蜀國(guó)", country: "趙云",age: 35 }, { seq: 9, name: "吳國(guó)", country: "孫權(quán)" ,age: 30 }, { seq: 10, name: "吳國(guó)", country: "周瑜",age: 32 }, { seq: 11, name: "吳國(guó)", country: "魯肅",age: 33 }, { seq: 12, name: "吳國(guó)", country: "黃蓋",age: 55 } ]; $scope.cls = function(i) { return (i + 1) % 4 == 1 ? "active" : ""; } } </script> </body> </html>
效果:
關(guān)于“angular.js如何實(shí)現(xiàn)列表orderby排序的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。