ng-options 不会预先 select 一个选项

Question

我正在使用 angular 的 ng-options 用人名填充 html。我希望它预先 select 我设置为 ng-model (registrantSelected) 的值。但是由于某些原因，它不会这样做。

我查阅了有关 ng-options 的各种不同文档，并查看了一堆关于 ng-options 的其他堆栈溢出帖子，但我似乎无法弄清楚我做错了什么。

代码可在this plunker或以下找到：

Javascript:

angular.module('app', [])
    .controller("MainController", ["$scope", function($scope) {
        $scope.paidDuesCompanyPeople = [{
            "FirstName": "Person",
            "LastName": "One",
            "MemberType": {
                "IsMember": false,
                "Name": "Non-member"
            }
        }, {
           "FirstName": "Second",
           "LastName": "Person",
           "MemberType": {
               "IsMember": true,
               "Name": "Member"
           }
        }, {
           "FirstName": "Three",
           "LastName": "People",
           "MemberType": {
               "IsMember": false,
               "Name": "Non-member"
        }
    }];

        $scope.registrantSelected = {
            "FirstName": "Person",
            "LastName": "One",
            "MemberType": {
                "IsMember": false,
                "Name": "Non-member"
            }
        };
    }]);

HTML:

<div ng-app="app" ng-controller="MainController">
  <div class="col-xs-12 col-sm-5">
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-6 control-label">Registration for</label>
        <div class="col-sm-6">
          <select class="form-control" ng-model="registrantSelected" ng-options="person.FirstName + ' ' + person.LastName for person in paidDuesCompanyPeople">
          </select>
        </div>
      </div>
    </form>
  </div>

  {{registrantSelected}}
</div>

感谢您提供的任何帮助！

Answer 1

将 registrantSelected 值更改为此：

$scope.registrantSelected = $scope.paidDuesCompanyPeople[0];

在javascript中，每两个对象只有当它们都引用同一个对象时才相同：

var x1 = { id : 1 };
var x2 = { id : 1 }; 
console.log(x1 == x2); // false

var y1 = { id : 1 };
var y2 = y1;
console.log(y1 == y2); // true

Answer 2

你应该可以在控制器中设置它，像这样...

$scope.registrantSelected = $scope.paidDuesCompanyPeople[0];

这让你的控制器看起来像这样（把它放在你的 plunkr 中）

编辑： 我已按要求添加了一个 plunkr http://plnkr.co/edit/r8XAWqBheAATwc8zXGSY?p=preview

angular.module('app', [])
  .controller("MainController", ["$scope", function($scope) {
    $scope.paidDuesCompanyPeople = [{
      "FirstName": "Person",
      "LastName": "One",
      "MemberType": {
        "IsMember": false,
        "Name": "Non-member"
      }
    },{
      "FirstName": "Second",
      "LastName": "Person",
      "MemberType": {
        "IsMember": true,
        "Name": "Member"
      }
    },{
      "FirstName": "Three",
      "LastName": "People",
      "MemberType": {
        "IsMember": false,
        "Name": "Non-member"
      }
    }];

    $scope.registrantSelected = $scope.paidDuesCompanyPeople[0];
  }]);

如果你想在视图中进行，

<select ng-model="registrantSelected" 
        ng-options="person.FirstName + ' ' + person.LastName for person in paidDuesCompanyPeople" 
        ng-init="registrantSelected=paidDuesCompanyPeople[0]"></select>

Answer 3

你可以通过在你的 ng-options 中引入 track by 来做到这一点，但是为了拥有 track by 你应该在那边有独特的属性。我强烈建议您添加 Id 属性，这样每条记录都是唯一的，您可以通过相同的方式进行跟踪。但现在只是为了演示，您可以通过 person.FirstName + person.Lastname 跟踪它（当您添加 id 时，您将通过 person.Id 跟踪）

<select class="form-control" 
   ng-model="registrantSelected" 
   ng-options="person.FirstName + ' ' + person.LastName for person in paidDuesCompanyPeople track by person.FirstName + person.Lastname ">
</select>

Demo Here

ng-options 不会预先 select 一个选项

ng-options will not pre-select an option

javascript

angularjs

ng-options

angularjs-ng-options