angular使用select时要注意的坑

一、错误使用产生的坑--留白

  公司前段时间要搞一个后台系统,为了快选了angular,在使用select标签的时候碰到一个小问题,首先我们先来看坑图,如图1所示。

 

      

 

  如图所示,出现了留白,也就是当我们使用select和ng-repeat循环时候出现了一个留白,如代码所示

 

 <select name="rzstatus" ng-model="rzstatus">
     <option ng-repeat=“a in aa” value="a">{{a.name}}</option>
 </select>

  

  出现这个问题的原因是指令使用错误,因为在使用select标签的时候应该是在select标签中直接使用ng-options指令而不再是option标签中使用ng-repeat指令了,代码如下所示

 

<select id="type" ng-model="formData.type" ng-options="item.id as item.name for item in typeData">
</select>

  

  如此写代码,就会出现如图2所示的界面,完美的避开了留白一行。

 

  

 

 

  ng-options新鲜的指令,下面我们来看下他的语法item.id as item.name for item in items。拿这句当案例,从后往前出现了三个关键字分别是in、for和as,in大家很熟悉从一个数组中依次遍历每一项的标识符,而for指代的是html5中option标签中的值,as 标签的意思是option标签中的value所对应的值,若有如下代码:

 

item.id as item.name for item in items

 

  其实他等价于

 

<option value="item.id">item.name</option>

 

  如上对应关系我相信大家就秒懂了,在做后台系统的时候如想让当前选项和服务端保持一致,如编辑文章时文章的属性,可见我们只需要对应as前面的item.as属性即可,如果我们要在每种选项前面多加一个“请选择”的选项,这时候只需要单独添加一个option标签行就成,如下代码所示:

 

<select id="type" ng-model="type" ng-options="item.id as item.name for item in items">
  <option value=“-1”>请选择</option>
</select>

 

  

 

posted @ 2016-12-11 18:16  bxl2016  阅读(14732)  评论(0编辑  收藏  举报