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

Question

我正在使用angular的ng-options用人员姓名填充html。 我希望它预先选择设置为ng-model（registrantSelected）的值。 但是由于某种原因，它不会这样做。

我查看了有关ng-options的各种不同文档，并查看了一堆有关ng-options的堆栈溢出文章，但是我似乎无法弄清楚自己在做什么错。

可以在此插件或以下插件中找到代码：

使用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

您可以track by在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>

在这里演示

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

将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