AnglularJS - ngOptions gewählte Option mit String-Wert für das Modell, aber Objekte als Optionen

Question

Schon seit Stunden Trawling jetzt versuchen zu verstehen, wie dies funktionieren soll.

Aber effektiv habe ich bekam

<div class="form-group"> 
    <?php $field = 'member_address_country'; ?> 
    <label for="<?=$field?>">Country</label> 
    <select class="form-control" id="<?=$field?>" ng-options="country.country_id as country.country_name for country in countries track by country.country_id" ng-model="a.<?=$field?>"> 
     <option value="" disabled="disabled" selected="selected">-- Select --</option> 
    </select> 
</div> 

Ich habe eine Reihe von Ländern aufgestellt, innerhalb $scope.countries als Objekte gespeichert suchen ähnlich wie

[ 
    {country_id: "1", country_name: "england"}, 
    {country_id: "2", country_name: "america"}, 
    {country_id: "3", country_name: "other"}, 
] 

Ich habe eine Reihe von Adressen bekam die sind in einem ngRepeat mit der Bezeichnung a, also a.member_address_country ist ein String, der eine int ID enthalten wird. So in diesem Beispiel seine "2"

obwohl im ngOptions und track by country.country_id und der Wert des Modells ist die ID von country_id wie erwartet, wenn die ngRepeat es gerade gerendert wird angezeigt -- Select -- anstatt Kommissionierung das Objekt aus dem Array, basierend aus die verfolgte ID

Was mache ich falsch, und wie kann ich das beheben?

Ich habe eine codepen der Ausgabe hinzugefügt ->http://codepen.io/owenmelbz/pen/XdxrMO?editors=1010

und ein weiteres Beispiel hier ->

angular.module('app', []) 
 
    .controller('testController', function($scope) { 
 

 
    $scope.a = { 
 
     member_address_country: 100 
 
    } 
 

 
    $scope.countries = [{ 
 
     country_id: 100, 
 
     country_name: "england" 
 
    }, { 
 
     country_id: 200, 
 
     country_name: "uk" 
 
    }, { 
 
     country_id: 300, 
 
     country_name: "london" 
 
    }] 
 

 
    });

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> 
 

 
<div class="form-group" ng-app="app" ng-controller="testController"> 
 
    <label for="member_address_country">Country</label> 
 
    <select class="form-control" id="member_address_country" ng-options="country.country_id as country.country_name for country in countries track by country.country_id" ng-model="a.member_address_country"> 
 
    </select>model value is: {{a.member_address_country | json}} 
 
</div>

Answer 1

Wenn ich Sie richtig verstehe, fragen Sie sich, warum Sie verwenden Sie standardmäßig die Option, die Ihren Platzhaltertext enthält?

<option value="" disabled="disabled" selected="selected">-- Select --</option> 

Zwei Dinge:

1. Sie müssen diese Option nicht enthalten, wenn Sie es als Haken für etwas anderes dort haben.
2. Wenn Sie das verwenden möchten, aber nicht möchten, dass es von defualt angezeigt wird (was, um ehrlich zu sein, für mich keinen Sinn macht), dann entfernen Sie das Attribut selected = "selected".

aktualisieren

In diesem Fall habe ich einen Blick auf Ihr Beispiel. Die Person, die Ihnen die Frage im obigen Kommentar gestellt hat, ist korrekt. Ihre Variable hat zwei verschiedene Namen: Land & Länder. Wählen Sie das eine oder das andere und bringen Sie sie zusammen, und es sollte gut sein, zu gehen.

See:

Sie verweisen diese Variable country.country_id

Aber in Ihrem Umfang erklären Sie

$scope.countries = [ 
{ 
    country_id: 100, 
    country_name: "england" 
}, 
{ 
    country_id: 200, 
    country_name: "uk" 
}, 
{ 
    country_id: 300, 
    country_name: "london" 
} 
] 

Update 2

Ich denke, das ist, was Sie wollen oder fast:

ng-options="country.country_id for country in countries track by id" 

Answer 2

HTML

<select ng-change="getName(a.member_address_country)" class="form-control" id="member_address_country" ng-options="country.country_id as country.country_name for country in countries" ng-model="a.member_address_country"> 
     </select> model value is: {{a.member_address_country| json}} 
    Name after change = {{name}}; 

JS

$scope.a = { 
     country_id: 100, 
      country_name: "england" 
     } 

    $scope.getName = function(countryid){ 
    angular.forEach($scope.countries,function(data){ 
     if(data.country_id == countryid){ 

     $scope.name = data.country_name; 
     } 

    }); 
    };