二者都可用於實現下拉列表,並且度娘上有很多關於兩者的內容,此處不再贅述,本文為了說明在最近的項目中遇到的相關問題,
可以寫成如下格式
ng-repeat
<select> <option value="x.id" ng-repeat="x in list" ng-bind="x.name"> </option> </select>
ng-options
<select ng-options="x.id as x.name for x in list" ng-model="listId"> </select>
區別:
- 如上所示,當在select中時ng-repeat需要寫在option中,而ng-options不需要option,會自動生成。
- ng-options 一定要和ng-model 搭配,ng-model獲取的是列表的value值。
- 注意!!
1).ng-options的value值得類型是number,當list.id是string類型時無法循環
2).ng-repeat的value值類型是string,當list.id是number類型時無法循環
可以根據id類型不同選擇,這是在最近的項目中發現的問題,通過上述方法解決,如果有不同見解,歡迎留言。
另:
附上在解決過程中嘗試的方法,可能重復,有問題僅做記錄(以下簡寫,以下兩種方法都是使用ng-repeat)
【步驟】:列表list中id類型規定為number類型,首次實現頁面下拉框時,使用的是ng-repeat,
【結果】:下拉列表顯示為空白
【問題】:F12查看Elements,發現下拉列表中option如下顯示
<option value="? number:1 ?"></option>
【解決1】 在js中將id裝換為string 類型list.id = list.id+"";
【方法的問題】
1.只是寫了一句話,但是需要的地方很多,導致重復....
2.改變了原類型
【解決2】 朋友的思路,在js中寫一個方法將id裝換為string 類型,並在頁面上使用這個方法,具體如下:
.js:
$scope.toString = function(){ list.id.toString(); }
.html
<option value="{{toString(x.id)}}" ng-repeat="x in list" ng-bind="x.name"></option>