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>