angular使用select时要注意的坑

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

　　公司前段时间要搞一个后台系统，为了快选了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>