angularjs Select下拉选择宽

csdncsdn9876

于 2016-06-01 20:33:35 发布

阅读量1.8k

点赞数

分类专栏： angularjs 文章标签： angularjs select

本文链接：https://blog.youkuaiyun.com/csdncsdn9876/article/details/51558794

版权

angularjs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用AngularJS的ng-options指令自定义显示下拉框中的选项，并通过ng-model获取选中项的对象，方便操作其属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
   <title>angularjs下拉选择框</title>
   <meta charset="utf-8" />
   <script src="angular/angular.min.js"></script>
</head>
<body>
   <div ng-app="myApp" ng-controller="myCtrl">
       <select ng-model="mySelect" ng-options="x.site for x in sites"></select>
       <h1>{{mySelect.site}}</h1>
       <p>{{mySelect.url}}</p>
   </div>
   <script>
       angular.module("myApp",[]).controller("myCtrl",function($scope){
           $scope.sites = [
           {site : "google", url:"http://www.baidu.com"},
           {site : "Runoob", url : "http://www.runoob.com"},
           {site : "Taobao", url : "http://www.taobao.com"}
            ];
       });
   </script>
</body>

</html>

ng-options中的x就是出现在下拉框中的选项，也是sites数组中的某一项。要出现该项中的哪一种属性，我们都可以很轻松的定制。而ng-model的值就是选中的某一个对象的值。可以很方便的操作其属性！