1. ng-repeat實現下拉框：
select下拉框里option組裝成下拉框，這里利用ng-repeat指令來創建
實現源碼
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title>AngularJS之下拉框（方式二）</title>
<script type=
"text/javascript"
src=
"../js/angular.min.js"
></script>
<script>
var
app = angular.module(
"secondApp"
,[]);
app.controller(
"secondCon"
,
function
($scope){
$scope.trees = [
"松樹"
,
"樟樹"
,
"楓樹"
,
"棗樹"
,
"桃樹"
];
});
</script>
</head>
<body>
<div ng-app=
"secondApp"
ng-controller=
"secondCon"
>
<select style=
"width: 200px;"
>
<option ng-repeat=
"tree in trees"
>{{tree}}</option>
</select>
</div>
</body>
</html>
|
2.ng-option指令使用很簡單，只需要綁定兩個屬性：
一個是ng-model用於獲取選定的值；
另一個是ng-options用於確定下拉列表的元素數組。
<select ng-model="engineer.currentActivity" class="form-control" ng-options="act for act in activities"></select>
上面這條語句就是把選擇的值與engineer.currentActivity進行雙向數據綁定，然后列表中的選項是activities中的每一個值。數據如下：
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
};
$scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];