AngularJS - ngOptions 为模型选择了带有字符串值的选项，但将对象作为选项

Question

现在已经搜索了几个小时，试图了解这是如何工作的。

但实际上我已经得到了

<div class="form-group">
    <?php $field = 'member_address_country'; ?>
    <label for="<?=$field?>">Country</label>
    <select class="form-control" id="<?=$field?>" ng-options="country.country_id as country.country_name for country in countries track by country.country_id" ng-model="a.<?=$field?>">
        <option value="" disabled="disabled" selected="selected">-- Select --</option>
    </select>
</div>

我有一个国家数组，存储在$scope.countries 中，对象看起来类似于

[
    {country_id: "1", country_name: "england"},
    {country_id: "2", country_name: "america"},
    {country_id: "3", country_name: "other"},
]

我有一个地址数组，它们在标记为a 的 ngRepeat 中，所以a.member_address_country 是一个字符串，其中包含一个 int id。在这个例子中是"2"

因此，尽管我使用 ngOptions 和 track by country.country_id 并且模型的值是来自 country_id 的 id，正如预期的那样，当呈现 ngRepeat 时它只显示 -- Select -- 而不是从数组中选择对象，基于跟踪的 id。

我做错了什么，我该如何解决？

我已经添加了问题的代码笔 -> http://codepen.io/owenmelbz/pen/XdxrMO?editors=1010

这里还有另一个例子 ->

angular.module('app', [])
  .controller('testController', function($scope) {

    $scope.a = {
      member_address_country: 100
    }

    $scope.countries = [{
      country_id: 100,
      country_name: "england"
    }, {
      country_id: 200,
      country_name: "uk"
    }, {
      country_id: 300,
      country_name: "london"
    }]

  });

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script>

<div class="form-group" ng-app="app" ng-controller="testController">
  <label for="member_address_country">Country</label>
  <select class="form-control" id="member_address_country" ng-options="country.country_id as country.country_name for country in countries track by country.country_id" ng-model="a.member_address_country">
  </select>model value is: {{a.member_address_country | json}}
</div>

Answer 1

HTML

<select ng-change="getName(a.member_address_country)" class="form-control" id="member_address_country" ng-options="country.country_id as country.country_name for country in countries" ng-model="a.member_address_country">
        </select> model value is: {{a.member_address_country| json}}
    Name after change = {{name}};

JS

    $scope.a = {
       country_id: 100,
          country_name: "england"
      }

  $scope.getName = function(countryid){
    angular.forEach($scope.countries,function(data){
      if(data.country_id == countryid){

        $scope.name = data.country_name;
      }

    });
  };

Answer 2

如果我理解正确，您想知道为什么您默认使用包含占位符文本的选项？

<option value="" disabled="disabled" selected="selected">-- Select --</option>

两件事：

1. 您不需要包含该选项，除非您将它作为其他内容的挂钩。
2. 如果您确实想使用它，但不希望它以默认方式显示（老实说，这对我来说没有多大意义），然后删除 selected="selected" 属性。李>

更新

在那种情况下，我看了一下你的例子。在上面的评论中问你问题的人是正确的。您的变量有两个不同的名称：国家和国家。选择其中一个并让它们匹配，应该很好。

见：

您正在引用此变量 country.country_id

但在你的范围内，你声明

$scope.countries = [
{
  country_id: 100,
  country_name: "england"
},
{
  country_id: 200,
  country_name: "uk"
},
{
  country_id: 300,
  country_name: "london"
}
]

更新 2

我认为这就是你想要的或接近的：

ng-options="country.country_id for country in countries track by id"