在angular中实现下拉框的两种方式 ng-repeat和 ng-option

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中的每一个值。数据如下:

在angular中实现下拉框的两种方式 ng-repeat和 ng-option
$scope.engineer = {
name: "Dani",
currentActivity: "Fixing bugs"
}; $scope.activities =
[
"Writing code",
"Testing code",
"Fixing bugs",
"Dancing"
];
上一篇:android SurfaceView绘制 重新学习--基础绘制


下一篇:PHP弱类型需要特别注意的问题