如何预先选择Angularjs中的选择选项，该选项填充了ng-options

Question

I have the following select that is filled with all the countries in the world, I have an Angularjs controller that calls a method that returns me the idCountry of one of those countries that variable idCountry is the id of the object and not the index of the position that object takes in the select. 我有以下的选择充满了世界上所有的国家，我有一个Angularjs控制器调用返回我的方法idCountry的国家之一，该变量idCountry是对象的ID，而不是的索引对象在select中的位置。

I need to pre-select that country in the select using the idCountry , is there a way to get the index that this object has in the select using the id of the object, I read some articles saying that this can be done using track by in the ng-options expression but I don't know how. 我需要使用idCountry在select中预先选择那个国家，是否有办法使用对象的id获取此对象在select中的索引，我读了一些文章说这可以使用track by在ng-options表达式但我不知道如何。

If I manage to get the index I could pre-select the option like this 如果我设法得到索引，我可以预先选择这样的选项

$scope.countriesSelect = $scope.countriesSelect[put here the select index that I can find]

Here is my select 这是我的选择

<select name="selectCountries" class="form-control" 
                                        id="selectCountries" 
                                        ng-model="selectCountries"
                                        ng-options="country.name for country in countryList track by country.idCountry" 
                                        ng-change=""
required>
</select>

and here is what I was trying to do in my Controller 这就是我在控制器中尝试做的事情

var idCountry = id;
$scope.selectCountries= $scope.selectCountries[idCountry]

EDIT 编辑

I edited my code, I have read similar questions but most of the questions are about how to initialize a select with a default value, I'm trying to do an edit page where the user can check all the values that he put during his registration, and he can edit them so, this select needs to be initialized with the value that he selected. 我编辑了我的代码，我已经阅读了类似的问题，但大多数问题是关于如何使用默认值初始化选择，我正在尝试编辑页面，用户可以在其中检查他在注册期间输入的所有值，他可以编辑它们，这个选择需要用他选择的值初始化。

I can get the id of any object of the list of objects 我可以获取对象列表中任何对象的id

here is the list of objects that populates my select 这是填充我的选择的对象列表

[{idCountry: 2, name: countryName}, {idCountry: 4, name: AnothercountryName}, {idCountry: 7, name: rockyCOuntry}]

I have a method that returns me the idCountry and I want to know if there's a way to get the index of the select using this idCountry or by putting some expression in my ng-options expression like using track by or something. 我有一个方法可以返回idCountry ，我想知道是否有办法使用这个idCountry获取select的索引，或者在我的ng-options表达式中添加一些表达式，比如使用track by或者其他东西。

I tried this $scope.selectCountries= $scope.selectCountries[idCountry] but this doesn't return me the correct country if I put 7 instead of setting the select in rockyCOuntry it sets the select in another country, I believe that is because the id of the list object doesn't correspond with the same index of the select that occupies that object. 我试过这个$scope.selectCountries= $scope.selectCountries[idCountry]但是这并没有给我正确的国家，如果我把7而不是在rockyCOuntry中设置选择它在另一个国家设置选择，我相信这是因为list对象的id与占用该对象的select的相同索引不对应。

Answer 1

Well, keep in mind your ng-model actually is an object , so you can't set directly the countryId of <option> . 好吧，请记住你的ng-model实际上是一个object ，所以你不能直接设置<option>的countryId 。 To achieve what you want, since you have already the id , you must do something like this in your controller : 为了实现你想要的，你已经拥有了id ，你必须在你的控制器中做这样的事情：

var selectedId = 7; // Just an example

$scope.selectCountries = { "idCountry": selectedId };

On other hand, if you don't want to set whole object in ngModel , just the idCountry (which I don't recommend), you can do the following: 另一方面，如果您不想在ngModel设置整个object ，只需要idCountry （我不推荐），您可以执行以下操作：

$scope.selectCountries = 7; // Just an example

<select name="selectCountries" class="form-control" id="selectCountries" ng-model="selectCountries" ng-options="country.idCountry as country.name for country in countryList" required>
 </select>

Demo: 演示：

 (function() { "use strict"; angular.module('app', []) .controller('mainCtrl', function($scope) { $scope.countryList = [ { "idCountry":2, "name":"countryName" }, { "idCountry":4, "name":"AnothercountryName" }, { "idCountry":7, "name":"rockyCOuntry" } ]; $scope.selectCountries = { "idCountry": 7 }; // $scope.selectCountries = 7; }); })();

 <!DOCTYPE html> <html ng-app="app"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> </head> <body ng-controller="mainCtrl"> <select name="selectCountries" class="form-control" id="selectCountries.id" ng-model="selectCountries" ng-options="country.name for country in countryList track by country.idCountry" required> </select> <pre ng-bind="selectCountries | json"></pre> </body> </html>

Note: Both ways give you the expected result. 注意：两种方式都可以获得预期的结果。

I hope it helps. 我希望它有所帮助。

如何预先选择Angularjs中的选择选项，该选项填充了ng-options

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-14 05:50:07

如何预先选择Angularjs中的选择选项，该选项填充了ng-options

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-14 05:50:07

解决方案1
0 已采纳 2016-07-14 05:50:07