日韩精品不卞视频,韩国一区二区三区四区

快捷導(dǎo)航

Angular排序?qū)嵗斀?/h1>

更新時(shí)間：2017年06月28日 08:58:32 作者：當(dāng)年華褪去生澀

本文通過(guò)實(shí)例給大家介紹了angular排序的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧

說(shuō)點(diǎn)小案例angular的排序

<!DOCTYPE html>
<html ng-app="mk">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0px;
    padding: 0px;
   }
   nav{
    text-align: center;
   }
   nav>*{
    vertical-align: top;
   }
   table{
    width: 100%;
    text-align: center;
   }
   table th,td{
    background: #A9A9A9;
    line-height: 30px;
   }
  </style>
 </head>
 <body>
  <div ng-controller="text">
   <nav>
    <select ng-model="a"> <!-- 這也是表單也有數(shù)據(jù)，她可以獲取value值，這幾個(gè)值代表你循環(huán)進(jìn)來(lái)的每項(xiàng)key名 -->
     <option value="num">按編號(hào)排序</option>
     <option value="name">按姓名排序</option>
     <option value="age">按年齡排序</option>
    </select>
    <select ng-model="b"> <!-- 也同樣獲取value值，當(dāng)為負(fù)的時(shí)候，是倒序，正序 -->
     <option value="">升序</option>
     <option value="-">降序</option>
    </select>
    <input type="text" ng-model="s"/>
   </nav>
   <table border="0px" id="table">
    <tr>
     <th>編號(hào)</th>
     <th>姓名</th>
     <th>年齡</th>
    </tr>
    <tr ng-repeat="value in data | orderBy:b+a | filter:s"> <!-- 過(guò)濾器過(guò)濾以下數(shù)據(jù) b+a這樣就字符串拼接到了一起。這樣數(shù)據(jù)改變就進(jìn)行了排序 -->
     <td>{{value.num}}</td>
     <td>{{value.name}}</td>
     <td>{{value.age}}</td>
    </tr>
   </table>
  </div>
  <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   var app=angular.module("mk",[]);
   app.controller("text",function($scope,$http){
    $http.get("paixu.json").success(function(data){
     $scope.data=data.xinxi
     $scope.a="num";
    })
   });
  </script>
 </body>
</html>

以上所述是小編給大家介紹的Angular排序?qū)嵗斀?，希望?duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Angular value與ngValue區(qū)別詳解
這篇文章主要介紹了Angular value與ngValue區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
基于AngularJS實(shí)現(xiàn)iOS8自帶的計(jì)算器
這篇文章的主要內(nèi)容是使用angularjs實(shí)現(xiàn)一個(gè)計(jì)算器，是一個(gè)仿iOS8風(fēng)格的計(jì)算器，功能基本和iOS自帶的計(jì)算器是一致的。有需要的朋友們可以參考借鑒。
2016-09-09
AngularJS Bootstrap詳細(xì)介紹及實(shí)例代碼
本文主要介紹AngularJS Bootstrap,這兩對(duì)AngularJS Bootstrap的基礎(chǔ)知識(shí)做了詳細(xì)講解,并提供簡(jiǎn)單示例,有需要的小伙伴可以參考下
2016-07-07
spring+angular實(shí)現(xiàn)導(dǎo)出excel的實(shí)現(xiàn)代碼
這篇文章主要介紹了spring+angular實(shí)現(xiàn)導(dǎo)出excel的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-02-02
深入理解Angularjs 臟值檢測(cè)
這篇文章主要介紹了深入理解Angularjs 臟值檢測(cè)，詳細(xì)的介紹了臟值檢測(cè)的原理和實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法
這篇文章主要介紹了@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件
本篇文章主要介紹了AngulerJS學(xué)習(xí)之按需動(dòng)態(tài)加載文件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
Angularjs Promise實(shí)例詳解
Promise是一個(gè)構(gòu)造函數(shù)，自己身上有all、reject、resolve這幾個(gè)異步方式處理值的方法，原型上有then、catch等同樣很眼熟的方法，下面通過(guò)實(shí)例代碼給大家講解angularjs promise 的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2018-03-03
Angular中使用Intersection Observer API實(shí)現(xiàn)無(wú)限滾動(dòng)效果
這篇文章主要介紹了Angular中使用Intersection Observer API實(shí)現(xiàn)無(wú)限滾動(dòng),實(shí)現(xiàn)原理為在data下面加一個(gè)loading元素如果此元素進(jìn)入視窗則調(diào)用api獲取新的數(shù)據(jù)加到原來(lái)的數(shù)據(jù)里面,這時(shí)loading就會(huì)被新數(shù)據(jù)頂下去,感興趣的朋友一起看看吧
2023-12-12
在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個(gè)現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下
2024-03-03