html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

Angular 中 select指令用法详解_AngularJS_

[ ] 已经帮助:人解决问题

最近在angular中使用select指令时,出现了很多问题,搞得很郁闷。查看了很多资料后,发现select指令并不简单,决定总结一下。hY5HTML5中文学习网 - HTML5先行者学习网

  select用法:hY5HTML5中文学习网 - HTML5先行者学习网

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

  属性说明:hY5HTML5中文学习网 - HTML5先行者学习网

  发现并没有ng-change属性hY5HTML5中文学习网 - HTML5先行者学习网

  ng-required:当属性值为true时,对select添加required验证,为false时不验证。hY5HTML5中文学习网 - HTML5先行者学习网

  ng-options:指定数据源,生成option选项。hY5HTML5中文学习网 - HTML5先行者学习网

  数据源为数组时,用法:hY5HTML5中文学习网 - HTML5先行者学习网

   label for value in arrayhY5HTML5中文学习网 - HTML5先行者学习网
   select as label for value in arrayhY5HTML5中文学习网 - HTML5先行者学习网
   label group by group for value in arrayhY5HTML5中文学习网 - HTML5先行者学习网
   select as label group by groupexpr for value in array track by trackexprhY5HTML5中文学习网 - HTML5先行者学习网

 数据源为对象时,用法:hY5HTML5中文学习网 - HTML5先行者学习网

   label for (key,value)in objecthY5HTML5中文学习网 - HTML5先行者学习网
   select as label for(key,value)in objecthY5HTML5中文学习网 - HTML5先行者学习网
label group by group for(key,value)in objecthY5HTML5中文学习网 - HTML5先行者学习网
select as label group by groupexpr for (key,value)in object track by trackexpr  hY5HTML5中文学习网 - HTML5先行者学习网
hY5HTML5中文学习网 - HTML5先行者学习网

 具体说明:hY5HTML5中文学习网 - HTML5先行者学习网

   array/object:数组/对象hY5HTML5中文学习网 - HTML5先行者学习网
hY5HTML5中文学习网 - HTML5先行者学习网

   label:option选项显示的名称。hY5HTML5中文学习网 - HTML5先行者学习网
hY5HTML5中文学习网 - HTML5先行者学习网

   select:是选中某一项后,绑定到ngModel的值。hY5HTML5中文学习网 - HTML5先行者学习网
hY5HTML5中文学习网 - HTML5先行者学习网

value : 数组中的值。hY5HTML5中文学习网 - HTML5先行者学习网
hY5HTML5中文学习网 - HTML5先行者学习网

  (key,value):对象的key,value。hY5HTML5中文学习网 - HTML5先行者学习网
hY5HTML5中文学习网 - HTML5先行者学习网

   group by groupexpr:用于选项分组,hY5HTML5中文学习网 - HTML5先行者学习网
hY5HTML5中文学习网 - HTML5先行者学习网

 ng-options与ng-repeat自动生成option选项的区别:hY5HTML5中文学习网 - HTML5先行者学习网
hY5HTML5中文学习网 - HTML5先行者学习网

 ng-options生成的option选项选中后,绑定到ngModel的值可以是对象。ng-repeat绑定到ngModel的值只能是字符串。hY5HTML5中文学习网 - HTML5先行者学习网
hY5HTML5中文学习网 - HTML5先行者学习网

注意:select初始化时需要为ngModel指定值,否则会出现空白选项。hY5HTML5中文学习网 - HTML5先行者学习网

以上所述是小编给大家介绍的Angular 中 select指令用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!hY5HTML5中文学习网 - HTML5先行者学习网

(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助