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

我正在使用angular的ng选项来填充html的名称。我希望它预先选择我设置的ng模型（注册人已选择）的值。但由于某种原因，它不会这样做。ng-options将不会预先选择一个选项

我查阅了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>

感谢您的帮助，您可以给！

来源

2016-09-27 eclaire211

$ scope.registrantSelected是不一样的对象...您需要使用paidDuesCompanyPeople [0]设置，或使用ng-options跟踪来定义要在选择器上进行比较的字段 –

您可以通过在y中引入track by来做到这一点我们的ng-options，但有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

来源

2016-09-27 15:39:21

谢谢！使用跟踪和添加一个唯一的ID完美解决了我的问题。 – eclaire211

@ eclaire211很高兴帮助你，谢谢:-) –

变化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

来源

2016-09-27 14:44:48 Hadi290

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

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

来源

2016-09-27 14:46:05 defaultcheckbox

您可以共享一个plunk吗？我曾经遇到类似的问题。 –

@AniruddhaRaje当然。这对你有用吗？ http://plnkr.co/edit/r8XAWqBheAATwc8zXGSY?p=preview – defaultcheckbox

作品！真棒:) –

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

回答

相关问题