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"
];