如何在充满 ng-options 的 Angularjs select 中预 select 一个 select 选项

Question

我有以下 select，其中包含世界上所有国家/地区，我有一个 Angularjs 控制器，它调用一个 return 将我设为 [=18] 的方法=] 变量 idCountry 是对象的 ID，而不是对象在 select 中所处位置的索引。

我需要使用 idCountry 预先 select select 中的那个国家/地区，有没有办法获取此对象在 [=54= 中的索引] 使用对象的 id，我读了一些文章说这可以在 ng-options 表达式中使用 track by 来完成，但我不知道如何。

如果我设法获得索引，我可以预先select这样的选项

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

这是我的 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>

这是我在控制器中尝试做的事情

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

编辑

我编辑了我的代码，我读过类似的问题，但大多数问题都是关于如何用默认值初始化 select，我正在尝试做一个用户可以检查的编辑页面他在注册期间输入的所有值，并且他可以编辑它们，所以这个 select 需要用他 select 编辑的值进行初始化。

我可以获取对象列表中任何对象的 ID

这是填充我的 select

的对象列表

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

我有一个方法 return 给我 idCountry 我想知道是否有办法使用这个 idCountry 获取 select 的索引或者在我的 ng-options 表达式中添加一些表达式，例如使用 track by 或其他东西。

我试过了$scope.selectCountries= $scope.selectCountries[idCountry] 但是如果我在 rockyCOuntry 中设置 7 而不是设置 select 而不是在另一个国家设置 select ，这并不是 return 我正确的国家，我相信那是因为列表对象的 ID 与占据该对象的 select 的相同索引不对应。

Answer 1

嗯，记住你的 ng-model 实际上是一个 object，所以你不能直接设置 <option> 的 countryId。为了实现你想要的，因为你已经有了 id，你必须在你的 controller:

中做这样的事情

var selectedId = 7; // Just an example

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

另一方面，如果你不想在 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>

演示：

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

注意：两种方式都能得到预期的结果。

希望对您有所帮助。

如何在充满 ng-options 的 Angularjs select 中预 select 一个 select 选项

How to pre-select a select option in an Angularjs select that's filled with ng-options

javascript

select

angularjs

angularjs-directive

angularjs-ng-options