首页 > 代码库 > 在angular中实现下拉框的两种方式 ng-repeat和 ng-option
在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=http://www.mamicode.com/ "../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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。