7 ng repeat指令例項以及擴充套件部分

在前面的文章中學習filter過濾器，現在在結合著看看ng-repeat指令，舉個例子。

顏色
值 }
} 
m1.controller('aaa',['$scope','$filter',function
($scope,$filter),,,
];$scope.fnsort = function
(type);
}]);

先介紹一下ng-repeat指令，他是用來遍歷資料的。

ng-repeat="data in datalist"，datalist是控制器裡的資料，data就好比變數名，檢視裡的}表示資料裡name物件。

其他的在前面都介紹過了。

在顏色和值上面繫結了fnsort方法，在fnsort方法裡接受型別。

arguments.callee['fnsort' + type] = !arguments.callee['fnsort' + type]; 這句**得到乙個布林值，來使用filter的排序方法來控制資料的正反排序。

上面的例子很簡單，我們再為它加上乙個搜尋的功能！

顏色
值 }
} 
m1.controller('aaa',['$scope','$filter',function
($scope,$filter),,,
];$scope.fnsort = function
(type);
$scope.fnsearch = function
(); }]);

我們宣告了乙個fnsearch方法，接受在檢視中的ng-model資料，再使用filter的篩選功能，是不是很方便，回想下如果是用jq來實現需要多少**。。。

假設我們搜尋'l'，那麼yellow和blue會正常的篩選出來。

並沒有問題，如果在次輸入'r'，應該會篩選出red和green才對！可是我們發現什麼都沒有。。。

注意fnsearch方法裡的這句**，$scope.datalist = $filter('filter')($scope.datalist,$scope.filterval); 我們在$scope.datalist資料裡搜尋，$scope.datalist在上一次搜尋裡，就僅剩yellow和blue兩條資料，所以就搜尋不到關於'r'的資料了，這個時候就宣告乙個區域性的變數，方便第二次搜尋依然是完整的資料。

完整**：

顏色
值 }
} 
m1.controller('aaa',['$scope','$filter',function
($scope,$filter),,,
];$scope.datalist =oriarr;
$scope.fnsort = function
(type);
$scope.fnsearch = function
(); }]);

上面用了ng-repeat只是最簡單的遍歷，現在看看ng-repeat的擴充套件部分。

ng-repeat-start以及ng-repeat-end，他們可以靈活控制遍歷形式。

}}}
m1.controller('aaa',['$scope',function
($scope),,,
];}]);

除此之外，還有6中擴充套件方法，還是上面的例子。

m1.controller('aaa',['$scope',function
($scope),,,
];}]);

這6中擴充套件方法除了索引之外，都是布林型別。

最後，微博求粉，謝謝。

7 ng repeat指令例項以及擴充套件部分

杭電計算機組成實驗7（七）取指令與指令解碼實驗

Linux實操篇常用指令

工程實訓小結（7）

7 ng repeat指令例項以及擴充套件部分

杭電計算機組成實驗7（七）取指令與指令解碼實驗

Linux實操篇 常用指令

工程實訓小結（7）

相關推薦

Linux實操篇常用指令