zoukankan      html  css  js  c++  java
  • AngularJS Select(选择框)

    1.  AngularJS 可以使用数组或对象创建一个下拉列表选项。使用 ng-options 指令来创建一个下拉列表,列表项通过对象和数组循环输出,代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/angular-1.3.15.min.js"></script>
        </head>
        <body>
            <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行-->
                <select ng-init="selectName = names[0]" ng-model="selectName" ng-options="x for x in names"></select>
            </div>
        
            <script>
                var app = angular.module("myApp", []);
                app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/
                    $scope.names = ["苹果", "橘子", "香蕉"];
                });
            </script>
        </body>
    </html>

    2.  ng-options 和 ng-repeat:ng-repeat 指令也可以创建下拉框列表,但是使用的方式是通过数组来循环 HTML 代码。但是使用 ng-options 更加适合创建下拉框列表,使用 ng-options 选择的是一个对象,使用 ng-repeat 选择的值是一个字符串。下面使用的是对象,不是数组,这样的话只用ng-options就更加方便。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="js/angular-1.3.15.min.js"></script>
        </head>
        <body>
            <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行-->
                <select ng-init="selectName = names.stu01" ng-model="selectName" ng-options="x for (x,y) in names"></select>
                
                <h1>你选择的是: {{selectName.name}}</h1>
                <h2>班级: {{selectName.class}}</h2>
            </div>
        
            <script>
                var app = angular.module("myApp", []);
                app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/
                    $scope.names = {
                        stu01:{name:'小红', class:'一班'},
                        stu02:{name:'小明', class:'二班'},
                        stu03:{name:'小方', class:'三班'}
                    };
                });
            </script>
        </body>
    </html>
  • 相关阅读:
    Mobile Widget——让开发移动应用就像做网页
    Qcon大会上电子工业出版社博文视点提供全程图书支持
    电子工业出版社PPT图书优秀作者上海书城讲座
    2天玩转单反相机引领时尚娱乐新生活
    Android开发之ADB使用
    交大研究生,就一个字牛
    程序员能力矩阵
    主流浏览器内核概览
    网站成功的三十三个法则
    Checkstyle, PMD, Findbugs对比
  • 原文地址:https://www.cnblogs.com/wgl1995/p/6265376.html
Copyright © 2011-2022 走看看