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>