在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>

varapp = angular.module("secondApp",[]);

app.controller("secondCon",function($scope){

$scope.trees = ["松树","樟树","枫树","枣树","桃树"];

});

</script>

</head>

<body>

<div ng-app="secondApp"ng-controller="secondCon">

<select js string">"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"
            ];