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

Question

我最近開始試驗AngularJS（和Ionic框架），但似乎無法使用下拉菜單來處理一系列對象。

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

$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"}]

我在這里做錯什么嗎？ 一定有我忽略的東西...

Answer 1

您可以使用類似這樣的東西。 我也使用了默認選擇值。

在控制器內部：

    $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>

希望這個能對您有所幫助..

干杯!

Answer 2

將您的ng-option指令輸入更改為：

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

Answer 3

顯然，出問題的是在渲染視圖時，我的變量（availablecarparks）還沒有任何值。 我在我的應用程序配置中創建了一個函數，並進行了路由解析，以確保api調用在控制器顯示視圖之前發生，並且現在一切都很好。