帶有離子的AngularJS，如何使用ng-options

我最近開始嘗試使用AngularJS（和Ionic框架），並且我似乎無法讓我的下拉菜單使用一組對象。帶有離子的AngularJS，如何使用ng-options

，如果需要，我可以提供更多的代碼，但基本上我有我的控制器中的下列對象：

$scope.availableCarParks = [{ 'Id': '1', 'Name': 'Parking1' },{ 'Id': '2', 'Name': 'Parking2' }];

而下面的HTML標記：

<select ng-model="selectedCarPark" ng-options="cp.Name for cp in availableCarParks"></select>

出於某種原因，我下拉總是爲空...... 當我做了一個「console.log（JSON.stringify（$ scope.availableCarParks））」，當我的控制器被初始化的時候，我看到了一個很好的我的對象數組（在Chrome控制檯中）：

[{"Id":"1","Name":"Parking1"},{"Id":"2","Name":"Parking2"}]

我在這裏做錯了什麼嗎？一定有什麼東西我俯瞰...

來源

2015-02-11 Tim Geerts

更改您的NG-option指令輸入：

ng-options="co.Id as cp.Name for cp in availableCarParks"

來源

2015-02-11 14:23:03

顯然，哪裏出了問題是，我的變量（availablecarparks）沒有任何價值它尚未呈現視圖時。我在我的應用程序配置中創建了一個函數，並進行了路徑解析，以確保在控制器顯示視圖之前發生api調用，現在一切正常。

來源

2015-02-12 15:31:31

您可以使用類似於此的內容。此外，我也使用了默認的選定值。

的控制器內：

$scope.data = { 
    availableCarParks : [ 
     {id: '1', name: 'Option A'}, 
     {id: '2', name: 'Option B'}, 
     {id: '3', name: 'Option C'} 
    ], 
    //This sets the default value of the select in the ui 
    selectedOption: {id: '3', name: 'Option C'} 
    };

HTML 標記：

<select name="mySelect" id="mySelect" 
     ng-options="option.name for option in data.availableCarParks track by option.id" 
     ng-model="data.selectedOption"></select>

希望這將幫助你..

乾杯！

來源

2016-09-07 07:32:30 Aruna

帶有離子的AngularJS，如何使用ng-options

回答

相關問題