转自：https://www.cnblogs.com/best/tag/Angular/

该指令允许你基于一个迭代表达式添加选项

<select ng-model="color" ng-options="c.name for c in colors">

<option>--请选择--</option>

</select>

ng-model必须要指定，默认情况下被选择的值就是当前对象，没有value的项将被清除。

示例代码：

 <!DOCTYPE html>

 <!--指定angular管理的范围-->

 <html ng-app="app01">

     <head>

         <meta charset="UTF-8">

         <title>指令</title>

     </head>

     <body>

         <!--指定控制器的作用范围-->

         <form ng-controller="Controller1" name="form1">

             <h3>基础下拉列表：</h3>

             <p>

                 <select ng-model="user1" ng-options="u.name for u in users">

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

                 </select>

                 <span> {{user1}}</span>

             </p>

             <h3>带分组的下拉列表：</h3>

             <p>

                 <select ng-model="user2" ng-options="u.name group by u.sex for u in users">

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

                 </select>

                 <span> {{user2}}</span>

             </p>

             <h3>组合的下拉列表：</h3>

             <p>

                 <select ng-model="user3" ng-options="(u.name+u.age+'岁') group by u.sex for u in users">

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

                 </select>

                 <span> {{user3}}</span>

             </p>

             <h3>自定义ng-model的值：</h3>

             <p>

                 <select ng-model="user4" ng-options="u.id as u.name group by u.sex for u in users">

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

                 </select>

                 <span> {{user4}}</span>

             </p>

         </form>

         <!--引入angularjs框架-->

         <script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>

         <script type="text/javascript">

             //定义模块，指定依赖项为空

             var app01 = angular.module("app01", []);

             //定义控制器，指定控制器的名称，$scope是全局对象

             app01.controller("Controller1", function($scope) {

                 $scope.users = [{

                     id: 1,

                     name: "tom",

                     sex: "男",

                     age: 19

                 }, {

                     id: 2,

                     name: "rose",

                     sex: "女",

                     age: 18

                 }, {

                     id: 7,

                     name: "jack",

                     sex: "男",

                     age: 16

                 }, {

                     id: 9,

                     name: "lucy",

                     sex: "女",

                     age: 20

                 }, {

                     id: 15,

                     name: "mark",

                     sex: "男",

                     age: 89

                 }];

             });

         </script>

     </body>

 </html>

运行结果：

最新文章

  1. 3D立体照片墙
  2. linux 获取线程号
  3. 线性表的顺序存储结构C语言版
  4. python 的特殊方法 __str__和__repr__
  5. 009. C#中的WebBrowser控件的属性、方法及操作演示代码(转)
  6. MSSQL死锁产生原因及解决方法
  7. linux文件操作命令--转
  8. android EditText监听事件及参数详解
  9. oracle execute immediate
  10. [DEEP LEARNING An MIT Press book in preparation]Deep Learning for AI
  11. CSS BFC(Block Formatting Context)
  12. 《经久不衰的Spring框架：Spring+SpringMVC+MyBatis 整合》
  13. Python之正则表达式（re模块）
  14. 实例讲解基于 React+Redux 的前端开发流程
  15. 第十二条：考虑实现Comparable接口
  16. 说一说MVC的CompressActionFilterAttrubute（五）
  17. C# 字段和属性
  18. E0264 Unable to execute &#39;&quot;/usr/bin/codesign&quot; ...&#39;
  19. Spark强大的函数扩展功能
  20. bootstrap中的模态框（modal，弹出层）

热门文章

  1. web移动端-弹性盒模型
  2. Linux常用软件tree,autojump,lrzsz安装
  3. [vue插件]基于vue2.x的电商图片放大镜插件
  4. [terry笔记]11gR2_dataguard_保护模式切换
  5. [terry笔记]redhat5.5_11gR2_RAC_安装
  6. 插入排序、冒泡排序、选择排序、希尔排序、高速排序、归并排序、堆排序和LST基数排序——C++实现
  7. ubuntu 各种窗体操作
  8. 深度学习系列之ANN
  9. 纳德拉再造微软：市值如何重回第一阵营（思维确实变了，不再是以windows为中心，拥抱其它各种平台，敢在主战场之外找到适合自己的新战场）
  10. 37.创建自定义的指令的限制使用 通过restrict 设置