1.angular js的遍歷
在傳遞數(shù)據(jù)的時候，經(jīng)常會用到對數(shù)據(jù)的處理，尤其是數(shù)據(jù)的遍歷
** angular.foreach**
var objs =[{a:”a1”},{a:”a2”}];
angular.forEach(objs, function(data,index,array){
//data等價于array[index]
console.log(data.a+'='+array[index].a);
});
objs:需要遍歷的集合
data:遍歷時當(dāng)前的數(shù)據(jù) （值） //a1,a2……
index:遍歷時當(dāng)前索引 //1,2,3……
array:需要遍歷的集合，每次遍歷時都會把objs原樣的傳一次,也可以不用寫后面兩個參數(shù)。
2.angular js的判斷
在html頁面中，有時候需要根據(jù)條件展示數(shù)據(jù)。
** ng-if讓數(shù)據(jù)的展示可以依賴于某個條件**
<a href="javascript:;" class="margin-r10" ng-click="goOff(row)" ng-if='row.status=="展示中"'> 下線</a>
<a href="javascript:;" class="margin-r10" ng-click="goOn(row)" ng-if='row.status=="未上線"'> 上線</a>
3.過濾器
接收輸入數(shù)據(jù)，通過過濾器按照某個規(guī)則處理后返回結(jié)果
可以在模版中使用，也可以在控制器中應(yīng)用
模版中 {{要表示的表達(dá)式｜過濾器名稱［:參數(shù)］}}
控制器中通過依賴注入 $filter
內(nèi)置過濾器
1 .date(日期格式化) var dateFilter=$filter(‘date’);----------比較常用
dateFilter(date, 'yyyy-MM-dd HH:mm:ss')
第一個參數(shù)表示要格式化的對象，第二個參數(shù)表示格式化的格式
自定義過濾器
寫一個 filter方法
app.filter(‘過濾器名’,function(){
return function(輸入的參數(shù)){ //閉包
/*函數(shù)體*/
return 返回結(jié)果
}
})
4.全局變量
- 通過var 直接定義global variable，這跟純js是一樣的。
- 用angularjs value來設(shè)置全局變量 。
- 用angularjs constant來設(shè)置全局變量
5.ng-repeat 報錯問題
控制臺報錯以下：
[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys
發(fā)現(xiàn)是因?yàn)橄嗤膬?nèi)容重復(fù)引起，解決方案：
在ng-repeat后面加上 track by $index
ng-repeat="word in words track by $index"
**$index **是循環(huán)的時候，元素的下標(biāo)，從0 開始
6.$http服務(wù)
$http服務(wù)是接受一個對象參數(shù)的函數(shù)，這個對象包含的是一些生成HTTP請求的配置，返回一個promise對象，具有success和error兩個函數(shù)，可以通過鏈?zhǔn)秸{(diào)用。
$http 參數(shù)是一個對象，包括有：url: , method: ,params: 這個鍵的值是一個字符串map或?qū)ο螅瑫晦D(zhuǎn)換成查詢字符串追加在URL后面 ( 發(fā)送GET請求時使用), data: 發(fā)送給服務(wù)器的數(shù)據(jù) (發(fā)送POST請求時使用) ,
返回的是一個promise對象，
1.success和error函數(shù)
$http({
url: " url.json",
method:"GET"
}).success(function(){
//響應(yīng)成功
}).error(function(){ //響應(yīng)失敗
})
2.通過then方法處理，參數(shù)是兩個函數(shù)
$http({
url: " url.json",
method:"GET"
}).then(function(){
//響應(yīng)成功
},function(){
//響應(yīng)失敗
})
7.ng-options的參數(shù)情況
例：javascript
$scope.School = [
{
"id": 27,
"name": "北京大學(xué)",
"status": 0,
"city":"北京"
},
{
"id": 29,
"name": "北京交通大學(xué)",
"status": 0,
"city":"北京"
},
{
"id": 1,
"name": "哈爾濱工業(yè)大學(xué)（威海）",
"status": 0,
"city":"哈爾濱"
},
{
"id": 10,
"name": "哈爾濱工業(yè)大學(xué)",
"status": 0,
"city":"哈爾濱"
},
{
"id": 11,
"name": "哈爾濱工程大學(xué)",
"status": 0,
"city":"哈爾濱"
}
]
html
<1> 基本下拉菜單 label for value in array
<select ng-model="Select1" ng-options="s.name for s in School">
<option value="">-- 請選擇 --</option>
</select>
這里表達(dá)式中的value即這里是m 代表的是在School數(shù)組中每次取出一個元素
label即這里的s.name 就是輸出的顯示結(jié)果
<2>自定義下拉菜單 label for value in array
<select ng-model="Select2" ng-options="(s.id+'-'+s.name) for s in School">
<option value="">-- 請選擇 --</option>
</select>
這里表達(dá)式中的value即這里是m 代表的是在School數(shù)組中每次取出一個元素
label即這里的 (s.id+'-'+s.name) 就是輸出的顯示結(jié)果（可自定義輸出樣式）
< 3>群組下拉菜單 label group by group for value in array
<select ng-model="Select3" ng-options="(s.id + ' - ' + s.name) group by s.city for s in School">
<option value="">-- 請選擇 --</option>
</select>
顯示結(jié)果如下：
表達(dá)式的by group即這里的 s.city 代表 用這個屬性作為條件來篩選群組
<4>自定 select 的 ngModel 的值 select as label for value in array
<select ng-model="Select4" ng-options="s.id as s.name for s in School">
<option value="">-- 請選擇 --</option>
</select>
select as label: label代表的是顯示的值，而select指的是當(dāng)前返回值
如果當(dāng)前選中的是“北京大學(xué)”， $scope.Select4=27
