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>