Angular 中 select指令用法详解

最近在angular中使用select指令时，出现了很多问题，搞得很郁闷。查看了很多资料后，发现select指令并不简单，决定总结一下。

　　select用法：

<select
ng-model=""
[name=""]
[required=""]
[ng-required=""]
[ng-options=""]>
</select>

　　属性说明：

　　发现并没有ng-change属性

　　ng-required：当属性值为true时，对select添加required验证，为false时不验证。

　　ng-options：指定数据源，生成option选项。

　　数据源为数组时,用法：

　　　label for value in array
　　　select as label for value in array
　　　label group by group for value in array
　　　select as label group by groupexpr for value in array track by trackexpr

　数据源为对象时，用法：

　　　label for （key，value）in object
　　　select as label for（key，value）in object
label group by group for（key，value）in object
select as label group by groupexpr for （key，value）in object track by trackexpr　　

　具体说明：

　　　array/object：数组/对象

　　　label：option选项显示的名称。

　　　select：是选中某一项后，绑定到ngModel的值。

value : 数组中的值。

　　（key，value）：对象的key，value。

　　　group by groupexpr：用于选项分组，

　ng-options与ng-repeat自动生成option选项的区别：

　ng-options生成的option选项选中后，绑定到ngModel的值可以是对象。ng-repeat绑定到ngModel的值只能是字符串。

注意：select初始化时需要为ngModel指定值，否则会出现空白选项。

以上所述是小编给大家介绍的Angular 中 select指令用法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Angular2中select用法之设置默认值与事件详解

    本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.设置默认值: 现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的select值就可以在下拉框默认选中 code1: 设置"请选择"为默认项,只需要把变量student设置为'',即可默认到"请选择",需要注意的是 <option value="">请选择</option>

  • angular select 默认值设置方法

    如下所示: <select ng-model="selected" ng-options="x.id as x.name for x in users"></select> $scope.users = [ {name:'a',id:'1'}, {name:'b',id:'2'}, {name:'c',id:'3'} ]; $scope.selected='2';//id的值,区分类型 $scope.selected=$scope.users

  • Angular 中 select指令用法详解

    最近在angular中使用select指令时,出现了很多问题,搞得很郁闷.查看了很多资料后,发现select指令并不简单,决定总结一下. select用法: <select ng-model="" [name=""] [required=""] [ng-required=""] [ng-options=""]> </select> 属性说明: 发现并没有ng-change属性 ng-

  • JS、jQuery中select的用法详解

    1.js var obj=document.getElementById(selectid); obj.options.length = 0; //清除所有内容 obj.options[index] = new Option("three",3); //更改对应的值 obj.options[index].selected = true; //保持选中状态 obj.add(new Option("4","4")); "文本",&

  • jsp中page指令用法详解

    本文实例讲述了jsp中page指令用法.分享给大家供大家参考.具体如下: 一.JSP 指令 JSP 指令(directive)影响由 JSP 页面生成的 servlet 的整体结构.下面的模板给出指令的两种可能形式.属性值两边的双引号可以替换为单引号,但引号标记不能完全省略.如果要在属性值中使用引号,则要在它们之前添加反斜杠,' 使用 \'," 使用 \" <% directive attribute="value" %> <% directive

  • Angular中的$watch方法详解

    在$apply方法中提到过脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法. (1)$watch简介 在digest执行时,如果watch观察的的value与上一次执行时不一样时,就会被触发. AngularJS内部的watch实现了页面随model的及时更新. $watch方法在用的时候主要是手动的监听一个对象,但对象发生变化时触发某个事件. (2)watch方法用法 $watch(watchFn,watch

  • C++中this指针用法详解及实例

    C++中this指针用法详解及实例 概要: 本文简单介绍this指针的基本概念,并通过一个实际例子介绍this指针用于防止变量命名冲突和用于类中层叠式调用的两个用法. this指针概览 C++中,每个类 对应了一个对象,每个对象指向自己所在内存地址的方式即为使用this指针.在类中,this指针作为一个变量通过编译器隐式传递给非暂存(non-static)成员函数.因为this指针不是对象本身,因此sizeof函数并不能用于确定this指针所对应的对象大小.this指针的具体类型与具体对象的类型

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • java中stringBuilder的用法详解

    String对象是不可改变的.每次使用System.String类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需要对字符串执行重复修改的情况下,与创建新的String对象相关的系统开销可能会非常昂贵.如果要修改字符串而不创建新的对象,则可以使用System.Text.StringBuilder类.例如,当在一个循环中将许多字符串连接在一起时,使用StringBuilder类可以提升性能. 通过用一个重载的构造函数方法初始化变量,可以创建StringBui

  • java中@SuppressWarnings注解用法详解

    SuppressWarnings注解是jse提供的注解.作用是屏蔽一些无关紧要的警告.使开发者能看到一些他们真正关心的警告.从而提高开发者的效率 简介: java.lang.SuppressWarnings是J2SE 5.0中标准的Annotation之一.可以标注在类.字段.方法.参数.构造方法,以及局部变量上.作用:告诉编译器忽略指定的警告,不用在编译完成后出现警告信息. 使用: @SuppressWarnings("") @SuppressWarnings({}) @Suppre

  • nginx中proxy_pass各种用法详解

    nginx中proxy_pass各种用法详解

    目录 代理转发规则 第一种: 第二种: 第三种: 第四种: 第五种: 代理转发规则 nginx中配置location代理转发规则的时候不同写法对应不同转发规则. 如果proxy_pass使用了URI,当传送请求到后端服务器时,规范化以后的请求路径与配置中的路径的匹配部分将被替换为指令中定义的URI(对应下文第一种情况). 如果proxy_pass没有使用URI,传送到后端服务器的请求URI一般客户端发起的原始URI(下文第二种情况). 访问地址:http://localhost/proxy/ab

随机推荐