码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS Select(选择框)

时间:2016-07-11 21:18:01      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 创建选择框

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>

    <body>

        <div ng-app="myApp" ng-controller="myCtrl">

            <select ng-model="selectedName" ng-options=" x in names">
</select>

        </div>

        <script>
            var app = angular.module(myApp, []);
            app.controller(myCtrl, function($scope) {
                $scope.names = ["Google", "Runoob", "Taobao"];
            });
        </script>

        <p>该实例演示了 ng-options 指令的使用。</p>

    </body>

</html>

ng-options 与 ng-repeat

我们也可以使用ng-repeat 指令来创建下拉列表:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>

    <body>

        <div ng-app="myApp" ng-controller="myCtrl">

            <select>
<option ng-repeat="x in names">{{x}}</option>
</select>

        </div>

        <script>
            var app = angular.module(myApp, []);
            app.controller(myCtrl, function($scope) {
                $scope.names = ["Google", "Runoob", "Taobao"];
            });
        </script>

        <p>该实例演示了使用 ng-repeat 指令来创建下拉列表。</p>

    </body>

</html>

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表。

ng-options 指令更适合创建下拉列表,它有以下优势

使用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。

AngularJS Select(选择框)

标签:

原文地址:http://www.cnblogs.com/chrisghb8812/p/5661563.html

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