码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-12-28 14:44:46      阅读:246      评论:0      收藏:0      [点我收藏+]

标签:java   text   module   html   mon   comm   tab   head   keyword   

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

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

标签:java   text   module   html   mon   comm   tab   head   keyword   

原文地址:http://www.cnblogs.com/yaleizhou/p/6229346.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!