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將不會預先選擇一個選項

回答

相關問題