Question

我正在使用有角度的ng-options来填充带有人名的html。我希望它预先选择我设置为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

你可以通过在track by中引入ng-options来做这件事，但是因为track by你应该在那里拥有独特的财产。我强烈建议您添加Id属性，以便使每条记录都独一无二。你也可以跟踪。但是现在只是为了演示，你可以通过person.FirstName + person.Lastname跟踪它（你将逐个跟踪。当你添加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

Answer 2

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

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

这使你的控制器看起来像这样（把它放在你的插件中）

修改：我已根据要求添加了一个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

将注册人选择的值更改为：

$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

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

3 个答案: