Angular 中 select指令用法详解  更新时间:2016年09月29日 15:03:22   作者:我辈中人   这篇文章主要介绍了Angular 中 select指令用法详解的相关资料,本文介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下 最近在angular中使用select指令时,出现了很多问题,搞得很郁闷。查看了很多资料后,发现select指令并不简单,决定总结一下。   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指令用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 您可能感兴趣的文章: angularjs实现下拉列表的选中事件示例 Angular2中select用法之设置默认值与事件详解 angular select 默认值设置方法 AngularJs ng-change事件/指令的用法小结 AngularJS Select(选择框)使用详解 Angular4 Select选择改变事件的方法 angular select 相关文章 AngularJS基础 ng-non-bindable 指令详细介绍 本文主要讲解AngularJS ng-non-bindable 指令,这里帮大家整理了ng-non-bindable指令的基本知识资料,有需要的小伙伴可以参考下 2016-08-08 实例剖析AngularJS框架中数据的双向绑定运用 这篇文章主要介绍了AngularJS框架中数据的双向绑定运用实例,包括数据绑定中的关键函数与监听器触发的相关讲解,需要的朋友可以参考下 2016-03-03 ng-repeat指令在迭代对象时的去重方法 今天小编就为大家分享一篇ng-repeat指令在迭代对象时的去重方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-10-10 Angular学习教程之RouterLink花式跳转 这篇文章主要给大家介绍了关于Angular学习教程之RouterLink花式跳转的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2018-05-05 如何在Angular.JS中接收并下载PDF 最近这两天公司正在做一个PDF协议下载的功能,目前的解决方案可以分为完全前端生成和后端生成两种方式。前端生成PDF有jsPDF 和pdfmake 两种方式,下面这篇文章就给大家分享下如何在Angular.JS中接收并下载PDF的方法,有需要的朋友们可以参考借鉴,下面来一起看看吧。 2016-11-11 AngularJS Controller作用域 这篇文章主要为大家详细介绍了AngularJS Controller的作用域,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-01-01 Angular 2父子组件数据传递之局部变量获取子组件其他成员 这篇文章主要给大家介绍了关于Angular 2父子组件之间数据传递之局部变量获取子组件其他成员的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-07-07 AngularJs html compiler详解及示例代码 本文主要介绍AngularJs html compiler的知识讲解,这里整理了相关资料及相关示例代码,有兴趣的小伙伴可以参考下 2016-09-09 初识angular框架后的所思所想 这篇文章主要介绍了初识angular框架后的所思所想,学习认识angular后的一些个人问题总结,需要的朋友可以参考下 2016-02-02 AngularJS实现动态编译添加到dom中的方法 这篇文章主要介绍了AngularJS实现动态编译添加到dom中的方法,结合实例形式分析了AngularJS动态编辑构建模板的相关操作技巧,需要的朋友可以参考下 2016-11-11 最新评论

最近在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指令用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • angularjs实现下拉列表的选中事件示例
  • Angular2中select用法之设置默认值与事件详解
  • angular select 默认值设置方法
  • AngularJs ng-change事件/指令的用法小结
  • AngularJS Select(选择框)使用详解
  • Angular4 Select选择改变事件的方法
张贴在3