参考：官方文档、zhx1991

select 无默认选择一项

<select name="" id="" class="form-control" ng-options="item.id for item in optData" ng-model="selected">

  <!-- item.id是label 显示出来的 item是value 选中的数据object -->

  <option value="">---请选择---</option>

</select>

select 有默认选择一项

  $scope.selected=$scope.optData[1];

select其他

//字符拼接

<select name="" id="" class="form-control"

ng-options="(item.id+' '+item.ProductName) for item in optData"

ng-model="selected"></select>

//分组 label group by groupName for value in Array

<select name="" id="" class="form-control"

ng-model="selected"

ng-options="item.id group by item.MainCategory for item in optData">

</select>

//下面selected的值为optData的id select as label for value in Array

<select name="" id="" class="form-control"

ng-model="selected"

ng-options="item.id as item.ProductName for item in optData"></select>

//多级列表

<select name="" id="" class="form-control" ng-options="obj.name for obj in people" ng-model="selectedPerson">

</select>

<select name="" id="" class="form-control" ng-model="selectedGenre">

    <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option>

</select>

ng-options的内容：

  • for array data sources:

    • labelforvalueinarray
    • selectaslabelforvalueinarray
    • labelgroup bygroupforvalueinarray
    • labeldisable whendisableforvalueinarray
    • labelgroup bygroupforvalueinarraytrack bytrackexpr
    • labeldisable whendisableforvalueinarraytrack bytrackexpr
    • labelforvalueinarray | orderBy:orderexprtrack bytrackexpr(for including a filter with track by)
  • for object data sources:
    • labelfor (key,value) inobject
    • selectaslabelfor (key,value) inobject
    • labelgroup bygroupfor (key,value) inobject
    • labeldisable whendisablefor (key,value) inobject
    • selectaslabelgroup bygroupfor(key,value) inobject
    • selectaslabeldisable whendisablefor(key,value) inobject

自己的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <script src="http://cdn.bootcss.com/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.js"></script>

    <script src="https://cdn.bootcss.com/angular-i18n/1.5.8/angular-locale_zh-cn.js"></script>

    <script>

        angular.module('m1',['ui.bootstrap'])

        .controller('ngselect',function($scope){

            $scope.optData=[

                {id:10001,MainCategory:'男',ProductName:'水洗T桖',ProductColor:'白'},

                {id:10002,MainCategory:'男',ProductName:'干洗毛衣',ProductColor:'黑'},

                {id:10003,MainCategory:'女',ProductName:'干洗毛衣',ProductColor:'篮'},

                {id:10004,MainCategory:'女',ProductName:'水洗T桖',ProductColor:'红'}

            ]

        })

        .controller('ngselect1',function($scope){

            $scope.optData=[

                {id:10001,MainCategory:'男',ProductName:'水洗T桖',ProductColor:'白'},

                {id:10002,MainCategory:'男',ProductName:'干洗毛衣',ProductColor:'黑'},

                {id:10003,MainCategory:'女',ProductName:'干洗毛衣',ProductColor:'篮'},

                {id:10004,MainCategory:'女',ProductName:'水洗T桖',ProductColor:'红'}

            ];

            $scope.selected=$scope.optData[1];

        })

        .controller('ngselect2',function($scope){

            $scope.optData=[

                {id:10001,MainCategory:'男',ProductName:'水洗T桖',ProductColor:'白'},

                {id:10002,MainCategory:'男',ProductName:'干洗毛衣',ProductColor:'黑'},

                {id:10003,MainCategory:'女',ProductName:'干洗毛衣',ProductColor:'篮'},

                {id:10004,MainCategory:'女',ProductName:'水洗T桖',ProductColor:'红'}

            ];

            $scope.selected=$scope.optData[1].id;

        })

        .controller('ngselect3',function($scope){

            $scope.people = [

                    {

                            id: 0,

                            name: '张三',

                            interest: [

                            '爬山',

                            '游泳',

                            '旅游',

                            '美食'

                        ]

                    },

                    {

                        id: 1,

                        name: '李四',

                        interest: [

                            '音乐',

                            '美食',

                            'Coffee',

                            '看书'

                        ]

                    },

                    {

                        id: 2,

                        name: '王五',

                        interest: [

                            '音乐',

                            '电影',

                            '中国好声音',

                            '爸爸去哪了',

                            '非常静距离'

                        ]

                    },

                    {

                        id: 3,

                        name: '小白',

                        interest: [

                            '游泳',

                            '游戏',

                            '宅家里'

                        ]

                    }

                ];

        })

    </script>

</head>

<body ng-app="m1">

    <div class="container">

        <h1>下拉列表</h1>

        <div ng-controller="ngselect">

            <h4>无默认选择 label for value in array</h4>

            <div class="col-xs-6">

                <select name="" id="" class="form-control" ng-options="item.id for item in optData" ng-model="selected">

                    <!-- item.id是label 显示出来的 item是value 选中的数据object -->

                    <option value="">---请选择---</option>

                </select>

            </div>

            <div class="col-xs-6">

                <input type="text" class="form-control" value="{{selected.id+'--'+selected.ProductName+'--'+selected.MainCategory}}"  >

            </div>

            <p class="well">添加一个'option'</p>

        </div>

        <div ng-controller="ngselect1">

            <h4>默认选择一项</h4>

            <div class="col-xs-6"><select name="" id="" class="form-control" ng-options="item.id for item in optData" ng-model="selected"></select></div>

            <div class="col-xs-6"><select name="" id="" class="form-control" ng-options="(item.id+' '+item.ProductName) for item in optData" ng-model="selected"></select></div>

            <div class="col-xs-6">

                <select name="" id="" class="form-control" ng-model="selected" ng-options="item.id group by item.MainCategory for item in optData"></select>

            </div>

        </div>

        <div ng-controller="ngselect2">

            <div class="col-xs-6">

                <select name="" id="" class="form-control" ng-model="selected" ng-options="item.id as item.ProductName for item in optData"></select>

                <input type="text" ng-model="selected">

            </div>

        </div>

        <div ng-controller="ngselect3">

            <div class="col-xs-3">

                <select name="" id="" class="form-control" ng-options="obj.name for obj in people" ng-model="selectedPerson">

                </select>

            </div>

            <div class="col-xs-3">

                <select name="" id="" class="form-control" ng-model="selectedGenre">

                    <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option>

                </select>

            </div>

        </div>

    </div>

</body>

</html>

　　

ng-options的使用的更多相关文章

  1. jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件

    支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...

  2. Flume NG Getting Started（Flume NG 新手入门指南）

    Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...

  3. Andrew NG 机器学习编程作业4 Octave

    问题描述:利用BP神经网络对识别阿拉伯数字(0-9) 训练数据集(training set)如下:一共有5000个训练实例(training instance),每个训练实例是一个400维特征的列向量 ...

  4. Flume NG 配置详解（转）

    原文链接:[转]Flume NG 配置详解 (说明,名词对应解释 源-Source,接收器-Sink,通道-Channel) 配置 设置代理 Flume代理配置存储在本地配置文件.这是一个文本文件格式 ...

  5. 斯坦福大学机器学习（Andrew Ng@2014）--自学笔记

    今天学习Andrew NG老师<机器学习>之6 - 6 - Advanced Optimization,做笔记如下: 用fminunc函数求代价函数最小值,分两步: 1.自定义代价函数 f ...

  6. 【原】Coursera—Andrew Ng机器学习—编程作业 Programming Exercise 4—反向传播神经网络

    课程笔记 Coursera—Andrew Ng机器学习—课程笔记 Lecture 9_Neural Networks learning 作业说明 Exercise 4,Week 5,实现反向传播 ba ...

  7. （原创）Stanford Machine Learning (by Andrew NG) --- (week 4) Neural Networks Representation

    Andrew NG的Machine learning课程地址为:https://www.coursera.org/course/ml 神经网络一直被认为是比较难懂的问题,NG将神经网络部分的课程分为了 ...

  8. Andrew Ng 的 Machine Learning 课程学习 (week4) Multi-class Classification and Neural Networks

    这学期一直在跟进 Coursera上的 Machina Learning 公开课, 老师Andrew Ng是coursera的创始人之一,Machine Learning方面的大牛.这门课程对想要了解 ...

  9. [C2P2] Andrew Ng - Machine Learning

    ##Linear Regression with One Variable Linear regression predicts a real-valued output based on an in ...

  10. 在库中使用schematics——ng add与ng update

    起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...

随机推荐

  1. Vim中常用的命令行

    Vim中常用的命令行... ------------------- 一些真正强大的武器总不是那么容易驾驭的,主角总得付出一些努力才能收获到更加强大的力量,对于 Vim 这种上古神器来说更是如此.由于它 ...

  2. 【Weblogic】linux下weblogic新建domain（入门教程）

    找到weblogic下的/common/bin目录,/home/weblogic/Oracle/Middleware/wlserver_10.3/common/bin ./config.sh -mod ...

  3. Spring事务管理——其他的事务属性

    之前我们说过Spring事务管理中的事务的传播行为的属性.下面我们来说一下它的其他属性. 一.事务的隔离级别 1 .数据库事务并发问题.假设现在有两个事务:Transaction01和Transact ...

  4. python+selenium自动化软件测试(第5章)：Selenium Gird

    5.1 分布式(Grid) Selenium grid是用来分布式执行测试用例脚本的工具,比如测试人员经常要测试多浏览器的兼容性,那就可以用到grid了.下面就来介绍如何在多个浏览器上运行同一份脚本. ...

  5. 简单易上手的Bootstrap

    什么是Bootstrap? Bootstrap是一个web框架.Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT ...

  6. 了解 Spring Boot AutoConfiguration

    原文:http://sivalabs.in/2016/03/how-springboot-autoconfiguration-magic/ 作者:Siva 译者:http://oopsguy.com ...

  7. Cognos 11.0快速开发指南 Ⅱ

    1.    创建报表 在创建好数据源之后,我们就可以创建报表了,报表的开发是浏览器中完成的,这里我选用了chrome浏览器,在地址栏输入:http://localhost:80/ibmcognos ( ...

  8. 在centos6上实现编译安装lamp和wordpress,并编译xcache

    author:JevonWei 版权声明:原创作品 软件环境: centos6.9 httpd-2.4.27.tar.bz2 apr-1.5.2.tar.bz2 apr-util-1.5.4.tar. ...

  9. CurrentCulture和CurrentUICulture的区别

    CurrentCulture 这个属性用来表示和改变使用者要使用的“地区属性”,地区属性改变后,数字.日期时间等表示格式也随之改变. 注意:一定是“地区属性”,如"zh-cn".& ...

  10. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...