㈠ Angular如何進行列表排序
1、打開Sublime
Text軟體，新建一個目錄結構，在目錄裡面添加angular的js庫文件和html文件，如下圖所示
2、接下來我們在html文件裡面通過script標簽引入angular的js腳本文件，如下圖所示
3、然後我們在腳本標簽裡面實現一個控制器，並且在scope上下文中准備一個列表數據，如下圖所示
4、接下來需要准備table列表，在table列表裡面通過ng-repeat命令遍歷准備好的數組，如下圖所示
5、准備好頁面以後，我們運行程序，你就會在頁面中看到如下圖所示的列表數據，這個數據和你剛才准備時的順序是一樣的
6、接下來我們在列表裡面通過orderBy命令來對列表進行排序，這里是按年齡排序的，所以在中括弧裡面要跟上age欄位，如下圖所示
7、最後我們重新運行頁面，你就會看到列表裡面的數據已經按照年齡從小到大進行排列了，如下圖所示
工具/材料
Sublime
Text
㈡ angularjs內置過濾器filter能不能獲取過濾後的數據
AngularJS的內置過濾器使用方法:
一個過濾器，不帶參數的情況
{{expression | filter}}
一個過濾器，帶參數的情況
{{expression | filter:arguments}}
一個過濾器，帶多個參數的情況
{{expression | filter: arg1: arg2: ...}}
多個過濾器，不帶參數的情況
{{expression | filter1 | filter2 | ...}}
分別使用以下AngularJS的內置過濾器
currency
currency允許我們設置自己的貨幣符號，默認情況下會採用客戶端所處區域的貨幣符號。
可以這樣使用：{{ 3600 | currency: "$￥"}}
返回結果為$￥123.00
online code點擊預覽
number
number過濾器將數字格式化成文本，它的參數是可選的，用來控制小數點後的截取位數
如果傳入的是一個非數字字元，會返回空字元串
可以這樣使用：{{ 3600 | number:2}}
返回結果為：3,600.00
online code點擊預覽
lowercase
lowercase將字元串轉換為小寫
可以這樣使用：{{ "HEllo" | lowercase}}
返回結果為：hello
online code點擊預覽
uppercase
uppercase將字元串轉換為大寫
可以這樣使用：{{ "HEllo" | uppercase}}
返回結果為：HELLO
online code點擊預覽
json
json過濾器可以將一個JSON或者JavaScript對象轉換成字元串。
這個過濾器對調試相當有用
可以這樣使用：{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回結果為：{ "name": "dreamapple", "language": "AngularJS" }
online code點擊預覽
date
date過濾器將日期過濾成你想要的格式，這個實在是很好的過濾器。
這個過濾器用法很多我這里列舉幾種常用的
{{ today | date: "yyyy - mm - dd"}}
結果為：2015 - 15 - 13
{{ today | date: "yyyy - mm - dd HH:mm::ss"}}
結果為：2015 - 18 - 13 20:18::38
[online code](2015 - 18 - 13 20:18::38)
㈢ angularjs filter怎麼顯示數字和顏色
一，內置的過濾器
1，uppercase，lowercase大小轉換
?
1
2
{{ "lower cap string" | uppercase }} //結果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} //結果：tank is good
｜這里的豎線是一種管道功能，如果對linux比較熟悉的話，這塊的｜根linux的管道功能，基本是一樣的
2，json格式化
?
1
{{ {foo: "bar", baz: 23} | json }} //結果：{ "foo": "bar", "baz": 23 }
注意：bza沒格式前是沒有雙引號的，格式化後就轉換成了json數據了。
3，date格式化
?
1
2
3
{{ 1304375948024 | date }} //結果：May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //結果：05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //結果：2011-05-03 06:39:08
4，number格式化
?
1
2
{{ 1.234567 | number:1 }} //結果：1.2
{{ 1234567 | number }} //結果：1,234,567
5，currency貨幣格式化
?
1
2
{{ 250 | currency }} //結果：$250.00
{{ 250 | currency:"RMB ￥ " }} //結果：RMB ￥ 250.00
6，filter查找
?
1
2
3
4
5
6
7
8
9
10
11
12
13
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}} //查找含有有s的行
//上例結果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }} //查找name為iphone的行
//上例結果:[{"age":20,"id":10,"name":"iphone"}]
7，limitTo字元串，對像的截取
?
1
2
3
4
5
6
7
{{ "i love tank" | limitTo:6 }} //結果：i love
{{ "i love tank" | limitTo:-4 }} //結果：tank
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }} //結果：[{"age":20,"id":10,"name":"iphone"}]
8，orderBy對像排序
?
1
2
3
4
5
6
7
8
9
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }} //根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }} //根據id升序排
二，自定filter功能
我找了一個基本angularjs的mvc框架，phonecat，自定義filter也是在這基礎寫的，這個框架挺好用的。
1，filters.js添加一個mole
?
1
2
3
4
5
angular.mole('tanktest', []).filter('tankreplace', function() {
return function(input) {
return input.replace(/tank/, "=====")
};
});
2，app.js中載入這個mole
?
1
2
3
4
5
6
var phonecatApp = angular.mole('phonecatApp', [
'ngRoute',
'phonecatControllers',
'facebookControllers',
'tanktest'
]);
3，html中調用
?
1
{{ "TANK is GOOD" | lowercase |tankreplace}} //結果：===== is good
注意：| lowercase |tankreplace管道命令可以有多個
三、filter的兩種使用方法
1. 在模板中使用filter
我們可以直接在{{}}中使用filter，跟在表達式後面用 | 分割，語法如下：
?
1
{{ expression | filter }}
也可以多個filter連用，上一個filter的輸出將作為下一個filter的輸入（怪不得這貨長的跟管道一個樣。。）
?
1
{{ expression | filter1 | filter2 | ... }}
filter可以接收參數，參數用 : 進行分割，如下：
?
1
{{ expression | filter:argument1:argument2:... }}
除了對{{}}中的數據進行格式化，我們還可以在指令中使用filter，例如先對數組array進行過濾處理，然後再循環輸出：
?
1
<span ng-repeat="a in array | filter ">
2. 在controller和service中使用filter
我們的js代碼中也可以使用過濾器，方式就是我們熟悉的依賴注入，例如我要在controller中使用currency過濾器，只需將它注入到該controller中即可，代碼如下：
?
1
2
3
app.controller('testC',function($scope,currencyFilter){
$scope.num = currencyFilter(123534);
}
在模板中使用{{num}}就可以直接輸出$123,534.00了！在服務中使用filter也是同樣的道理。
此時你可能會有疑惑，如果我要在controller中使用多個filter，難道要一個一個注入嗎，這豈不太費勁了？小兄弟莫著急~ng提供了一個$filter服務可以來調用所需的filter，你只需注入一個$filter就夠了，使用方法如下：
?
1
2
3
4
app.controller('testC',function($scope,$filter){
$scope.num = $filter('currency')(123534);
$scope.date = $filter('date')(new Date());
}
可以達到同樣的效果。好處是你可以方便使用不同的filter了。