angular:關(guān)于ng-repeat和ng-options

二者都可用于實現(xiàn)下拉列表,并且度娘上有很多關(guān)于兩者的內(nèi)容,此處不再贅述,本文為了說明在最近的項目中遇到的相關(guān)問題,
可以寫成如下格式

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>
區(qū)別:
  1. 如上所示,當(dāng)在select中時ng-repeat需要寫在option中,而ng-options不需要option,會自動生成。
  2. ng-options 一定要和ng-model 搭配,ng-model獲取的是列表的value值。
  3. 注意?。?br> 1).ng-options的value值得類型是number,當(dāng)list.id是string類型時無法循環(huán)
    2).ng-repeat的value值類型是string,當(dāng)list.id是number類型時無法循環(huán)
    可以根據(jù)id類型不同選擇,這是在最近的項目中發(fā)現(xiàn)的問題,通過上述方法解決,如果有不同見解,歡迎留言。

另:
附上在解決過程中嘗試的方法,可能重復(fù),有問題僅做記錄(以下簡寫,以下兩種方法都是使用ng-repeat)

【步驟】:列表list中id類型規(guī)定為number類型,首次實現(xiàn)頁面下拉框時,使用的是ng-repeat,
【結(jié)果】:下拉列表顯示為空白
【問題】:F12查看Elements,發(fā)現(xiàn)下拉列表中option如下顯示

            <option value="? number:1 ?"></option>

【解決1】 在js中將id裝換為string 類型

             list.id = list.id+"";

【方法的問題】
1.只是寫了一句話,但是需要的地方很多,導(dǎo)致重復(fù)....
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>

【方法的問題】
1.控制臺會報錯,錯誤沒有深究,路過大神可以指路,如果以后知道了,我會進行補充_.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容