AngularJS過濾器應用之表頭排序

阿新 • • 發佈：2019-01-10

需求解釋：表頭排序指的是使用列表方式顯示資料時，如果使用者單擊列表中某列頭部元素，那麼列表中的全部資料將會自動按該列表的屬性值自動排序，預設為升序，再次單擊為降序；

案例如下：
表頭排序

表頭排序

先貼程式碼：

<!doctype html>
<html ng-app="a3_4">
<head>
    <title>表頭排序</title>
    <script src="../Script/angular.min.js"
            type="text/javascript"></script>
    <style 
 type="text/css">
body{font-size:12px}
ul{list-style-type:none;width:408px;margin:0;padding:0}
ul li{float:left;padding:5px 0}
ul .bold{font-weight:700;cursor:pointer}
ul li span{width:52px;float:left;padding:0 10px}
ul .focus{background-color:#ccc}
    </style>
</head>
<body>
    <div ng-controller 
="c3_4">
        <ul>
            <li ng-class="{{bold}}">
                <span>序號</span>
                <span ng-click="title='name';desc=!desc">
                    姓名
                </span>
                <span ng-click="title='sex';desc=!desc">
                    性別
                </span 
>
                <span ng-click="title='age';desc=!desc">
                    年齡
                </span>
                <span ng-click="title='score';desc=!desc">
                    分數
                </span>
            </li>
            <li ng-repeat=" stu in data | orderBy : title : desc">
                <span>{{$index+1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{stu.age}}</span>
                <span>{{stu.score}}</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var a3_4 = angular.module('a3_4', []);
        a3_4.controller('c3_4', ['$scope', function ($scope) {
            $scope.bold = "bold";
            $scope.title = 'name';
            $scope.desc = 0;
            $scope.data = [
            { name: "張明明", sex: "女", age: 24, score: 95 },
            { name: "李清思", sex: "女", age: 27, score: 87 },
            { name: "劉小華", sex: "男", age: 28, score: 86 },
            { name: "陳忠忠", sex: "男", age: 23, score: 97 }
            ];
        }])
    </script>
</body>
</html>

程式碼解釋如下：
為了實現單擊表頭排序的功能
①首先我們需要向控制器中新增”title”和”desc”兩個屬性,分別用於繫結排序時的屬性名稱和排序方向，並賦予初始值”name”和0,表示資料初始化時按“姓名”屬性的升序排列，實現程式碼如下；

表頭排序

②然後再頁面的檢視模板中，當通過ng-repeat指令複製並顯示資料是，呼叫了”orderBy”過濾器，並帶有兩個引數；

表頭排序

③第一個冒號後的引數指定排序的屬性名，第二個冒號後的引數指定了排序是的方向；該引數預設或預設時為升序,1為降序,0為升序；

④由於”title”和“desc”屬性的初始值分別為”name”和0；所以在頁面初始化時，將按“姓名”屬性的升序排列。

⑤最後，在各個表頭元素的點選(ng-click)事件中，分別對”title”和“desc”屬性值進行重置。

⑥由於這兩個值已與“orderBy”的過濾器的兩個引數繫結，所以當這兩個值發生變化時，自動改變資料顯示是的排序屬性名稱和方向，最終實現按單擊表頭屬性排序的功能；

AngularJS過濾器應用之表頭排序

需求解釋：表頭排序指的是使用列表方式顯示資料時，如果使用者單擊列表中某列頭部元素，那麼列表中的全部資料將會自動按該列表的屬性值自動排序，預設為升序，再次單擊為降序；案例如下：先貼程式碼： <!doctype html> &l

Angularjs 過濾器完成排序

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript

二叉排序樹的應用之——資料結構實驗之查詢三：樹的種類統計

注意：中序遍歷二叉樹時，只能在樹不為空的時候才能進行遞迴呼叫！資料結構實驗之查詢三：樹的種類統計 Time Limit: 400 ms Memory Limit: 65536 KiB Submit Statistic Problem Descr

過濾器應用（四）之許可權過濾器

package com.jjyy.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servle

Angularjs 前端資料用orderBy排序，單表頭和多表頭處理，單表頭不預設排序

orderBy這個功能其實是內建的過濾器，他可以在html和js程式碼中使用　　　　html：{{ orderBy_expression | orderBy : expression : reverse}} 　　　　js ：$filter('orderBy

linux應用之vim的安裝與配置（centos）

utf8 power scroll pbo gb2312 nco pla red vma 1.vim的安裝 #yum search vim //查看vim相關軟件信息 #yum install -y vim* //在線安裝vim 2.vim的配置（1）~/.vimi

排序算法之高速排序（Java）

大於一個數大小 main div 移動 swap 交換 system //高速排序 public class Quick_Sort { // 排序的主要算法 private int Partition(int[] data, int start, int en

Dubbo框架應用之（一）--服務體系

white 部件 esp 恢復 fonts resp auto zh-cn 通過 Dubbo 是阿裏巴巴公司開源的一個高性能優秀的服務框架，使得應用可通過高性能的 RPC 實現服務的輸出和輸入功能，能夠和 Spring框架無縫集成，也是一個很全面的

session應用之購物車的實現

har head 一維數組 empty img con 維數 htm http 現在網頁中的購物車功能的實現都是依賴的數據庫，相比之下，以前是依賴服務器端的session來儲存。今天來講一下session實現購物車的邏輯。用一張水果信息表為例子來演示。 1.首先我們寫出來

JavaScript ,Python,java,Go系列算法之選擇排序

javascript java python go系列算法之選擇排序常見的內部排序算法有：插入排序、希爾排序、選擇排序、冒泡排序、歸並排序、快速排序、堆排序、基數排序等。用一張圖概括：選擇排序選擇排序是一種簡單直觀的排序算法，無論什麽數據進去都是O(n2) 的時間復雜度。所以用到它的

C語言數組之冒泡排序+折半查找法（二分查找）

不存在次數存在是否 .com int count 結束如果冒泡排序算法 1 int num[5]; 2 int i; 3 //循環接收用戶輸入的元素 4 for(i=0;i<5;i++){ 5 pr

linux應用之xampp集成環境的安裝及配置（centos）

其他配置文件 ln -s 提示 config 執行權 listen location x64 1.xampp集成環境的下載　　在xampp的官網上選擇對應系統的版本進行下載，官網地址：https://www.apachefriends.org/zh_cn/index.h

委托的應用之事件

con 代碼 eve null awake his 增加 del 問題：前言　　上一個章節介紹了委托，這裏我們再通過一個例子繼續鞏固一下委托的用法並引入事件的用法。　　為了便於理解，這裏還是引入一個很老的例子: 因為一只貓叫了一聲接著老鼠被嚇跑小孩

排序之快速排序

技術分享復雜 partition 規則作用快速排序 iterator 排序規則 cto 快速排序的在內排中起到比較重要的作用，平均時間復雜度達到O(nlogn)。升序快速排序 1 int partition(vector<int> &vi,

java面試準備之基礎排序——冒泡與選擇排序

-1 [] pub pop 基礎排序 ava for length system 選擇排序： public void select(int[] arr){ for(int i=0;i<arr.length;i++){ for(int j=i+1;j&

ege圖形庫之動畫排序

lips 做的選擇排序 lod 代碼運動 rgb ans get 老師布置了一個學習ege圖形庫來做動畫排序的小動畫程序,這是我自己做的效果。由於個人水平有限，可能代碼有些地方可以改進。不足之處敬請指出。註：要運行該代碼需要正確配置，連接好ege圖形庫的頭文件,做好準

算法之選擇排序算法

cts nbsp ack 元素 swap oid light min swa 思路：　　選擇排序每次叠代都在尋找剩下的數組元素中的最小值（最大值），依次拿數組中的一個元素和剩下的元素進行比較。然後把該極值移動到數組的另一邊。原始數組： 5 9 4 6 7 3

排序算法之插入排序

oid code wap for pre spa 每次 [] 位置思路：　　每次叠代都和前面的元素進行比較，如果小於前面的元素則把當前元素和其前面的元素進行交換，然後接著再比較和前面元素的大小，若還是小於前面的元素則繼續進行交換。如果大於前面的元素則終止當前的叠代。和選

linux應用之crontab定時任務的設置

表格軟件結果 monthly 不執行 shell腳本 service 文件時間實現Linux定時任務有:cron、anacron、at等，這裏主要介紹cron服務。名詞解釋： cron是服務名稱，crond是後臺進程，crontab則是定制好的計劃任務表。

數據結構之插入排序--折半插入排序

比較 right str 通過空間復雜度 style pub clas 數據排序思路：通過折半查找的方式找到合適的插入位置再插入。算法實現： public class BiInsertSort { public static void biInsertSor

AngularJS過濾器應用之表頭排序

相關推薦