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调用，现在一切都很顺利。

AngularJS与Ionic，如何使用ng-options

3 个答案: