带有离子的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

回答

相关问题