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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选择框Select</title>

    <script src="angular-1.4.1/angular.min.js"></script>

</head>

<body>

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

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

      </select>

   </div>

   <script>

      var app = angular.module('myApp',[]);

       app.controller('myCtrl',function($scope){

           $scope.names = ["谷歌","百度","搜狗"];

       });

   </script>

</body>

</html>

运行结果:　　

用ng-option加载列表：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选择框Select</title>

    <script src="angular-1.4.1/angular.min.js"></script>

    <script>

        var app = angular.module('myApp', []);

        app.controller('customersCtrl', function($scope) {

            $scope.sites = [

                {site:"谷歌",url:"http:www.google.com"},

                {site:"百度",url:"http:www.baidu.com"},

                {site:"搜狗",url:"http:www.sogou.com"}

            ];

        });

    </script>

</head>

<body>

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

      <select ng-model="selectedSite" ng-options="x.site for x in sites">

      </select>

      <h1>你选择的内容如下:</h1>

      <p>名字:{{selectedSite.site}}</p>

      <p>网址为:{{selectedSite.url}}</p>

  </div>

</body>

</html>

运行结果：

用ng-repeat加载列表数据也可以但是有局限性，选择的是一个字符串：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选择框Select</title>

    <script src="angular-1.4.1/angular.min.js"></script>

    <script>

        var app = angular.module('myApp', []);

        app.controller('customersCtrl', function($scope) {

            $scope.sites = [

                {site:"谷歌",url:"http:www.google.com"},

                {site:"百度",url:"http:www.baidu.com"},

                {site:"搜狗",url:"http:www.sogou.com"}

            ];

        });

    </script>

</head>

<body>

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

      <select ng-model="selectedSite">

          <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>

      </select>

      <h1>你选择的内容是:{{selectedSite}}</h1>

  </div>

</body>

</html>

　　运行结果：

ng-options使用对象有很大的不同，使用对象作为数据源, x 为键(key), y 为值(value),select控件ng-options表示控件的值是什么，然后ng-model绑定了数据对应的数据源：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选择框Select</title>

    <script src="angular-1.4.1/angular.min.js"></script>

    <script>

        var app = angular.module('myApp', []);

        app.controller('customersCtrl', function($scope) {

            $scope.sites = {

                site01 : "Google",

                site02 : "Runoob",

                site03 : "Taobao"

            };

        });

    </script>

</head>

<body>

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

      <select ng-model="selectedSite" ng-options="x for (x, y) in sites">

      </select>

      你选择的是:{{selectedSite}}

  </div>

</body>

</html>

　　运行结果 你选择的值为在 key-value 对中的 value。

此外value 在 key-value 对中也可以是个对象：选择的值在 key-value 对的 value 中, 这是它是一个对象:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选择框Select</title>

    <script src="angular-1.4.1/angular.min.js"></script>

    <script>

        var app = angular.module('myApp', []);

        app.controller('customersCtrl', function($scope) {

            $scope.cars = {

                car01 : {brand : "Ford", model : "Mustang", color : "red"},

                car02 : {brand : "Fiat", model : "500", color : "white"},

                car03 : {brand : "Volvo", model : "XC90", color : "black"}

            };

        });

    </script>

</head>

<body>

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

      <select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">

      </select>

      你选择的是:{{selectedCar}}

  </div>

</body>

</html>

　　运行结果：

AngularJS(6)-选择框Select的更多相关文章

  1. Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  2. layui下拉选择框select不显示

    弹层layer下拉框没有样式_不可点击_没有效果_渲染失效的解决办法 一.必须给表单体系所在的父元素加上 class="layui-form" 在一个容器中设定 class=&qu ...

  3. HTML、CSS小知识--兼容IE的下拉选择框select

    HTML <div class="s_h_ie"> <select id="Select1" disabled="disabled& ...

  4. Bootstrap系列 -- 15. 下拉选择框select

    Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...

  5. selenium之 下拉选择框Select

    今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...

  6. 【JavaScript&jQuery】单选框radio，复选框checkbox，下拉选择框select

    HTML: <!DOCTYPE html> <html> <head> <title></title> <meta charset=& ...

  7. angularjs中下拉框select option默认值

    1.问题说明: option ng-repeat多空白项 2.解决方案: html: <ion-view hide-nav-bar="true"> <ion-co ...

  8. Bootstrap系列 -- 15. 下拉选择框select【转发】

    <form role="form"> <div class="form-group"> <select class="f ...

  9. AngularJS Select(选择框)

    AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...

随机推荐

  1. K-means Algorithm

    在监督学习中,有标签信息协助机器学习同类样本之间存在的共性,在预测时只需判定给定样本与哪个类别的训练样本最相似即可.在非监督学习中,不再有标签信息的指导,遇到一维或二维数据的划分问题,人用肉眼就很容易 ...

  2. jQuery的动画效果

    jQuery 是一个 JavaScript 库.jQuery 库可以通过一行简单的标记被添加到网页中. <script type="text/javascript" src= ...

  3. [Java] 多个Map的性能比较（TreeMap、HashMap、ConcurrentSkipListMap）

    比较Java原生的 3种Map的效率. 1.  TreeMap 2.  HashMap 3.  ConcurrentSkipListMap 结果: 模拟150W以内海量数据的插入和查找,通过增加和查找 ...

  4. python(3)-函数动态参数

    先来看一段代码 def show(*arg): print(arg, type(arg)) if __name__ == "__main__": show(1) show(1,2, ...

  5. java+mysql实现保存图片到数据库，以及读取数据库存储的图片

    一:建表 二:获取数据库连接 1:导入mysql的驱动jar包,mysql-connector-java-5.1.8-bin.jar 2:写代码连接数据库,如下: /** * */ package c ...

  6. 运用CMD命令关于快速获取文件夹名称和快速建立文件夹

    前些天头儿让我建立一本本的文件夹,让后交给我了几个命令,快速获取文件夹的名称和快速建立文件夹,省去了一个个的按F2,一个个的复制,粘贴,一个个的新建,再复制粘贴. 首先讲一下第一个问题,快速获取文件夹 ...

  7. Ubuntu下用SecureCRT连接串口/dev/ttyUSB0权限修复

    在普通用户的模式下,用SecureCRT链接串口交换机,开始会提示/dev/ttyUSB0权限不足,无法打开,临时的解决办法是 chmod 0+rw /dev/ttyUSB0 但是这个重启后便没了作用 ...

  8. XP下Winform背景透明问题

    win 7上usercontrol控件背景色设置为透明,显示无异常.到XP上一看,变成Control颜色了,即常见的灰色.网上搜了一堆,没发现有用的.偶然看到XP上Label的背景色可以透明,于是用L ...

  9. React-Native的基本控件属性方法

    对React-Native的学习,从熟悉基本控件开始. View 属性方法 序号 名称 属性Or方法 类型 说明 1 accessibilityLabel 属性 string   2 accessib ...

  10. 解析LRC歌词文件readlrc

    package com.jikexueyuan.readlrc.main; import com.jikexueyuan.readlrc.utils.Utils; import java.io.Fil ...