AngularJS Auswahl - Einstellung ng-Modell in der Steuerung aktualisiert nicht ausgewählten Wert

Question

Ich habe ein Problem bei der Aktualisierung meiner ng-Modell in der Auswahl.
Ich habe folgende HTML:

<div ng-app> 
    <div ng-controller="Ctrl"> 
     <select ng-model="viewmodel.inputDevice" 
     ng-options="i.label for i in viewmodel.inputDevices"> 
     </select> 
    </div> 
</div> 

Und den folgenden Code:

function Ctrl($scope) { 
    // view model 
    $scope.viewmodel = new function() { 
     var self = this; 
     var elem1 = { 
      value: '1', 
      label: 'input1' 
     }; 

     var elem2 = { 
      value: '2', 
      label: 'input2' 
     } 

     self.inputDevices = [elem1, elem2]; 

     self.inputDevice = { 
      value: '1', 
      label: 'input1' 
     }; 
    }; 
} 

Sie können die Verwendung folgende JSFiddle

Was ich will, in Inputdevice derselben zu tun ist, setzen Werte, die das erste Gerät in der Sammlung inputDevices hat.
Ich weiß, dass ich elem1 übergeben kann und es wird funktionieren, aber ich kann es nicht tun, da ich die Auswahl im lokalen Speicher speichern und dann wieder auf das ng-Modell-Objekt wiederherstellen möchte.

self.inputDevice = { 
      value: '1', 
      label: 'input1' 
     }; 

Ich würde speichern Index nur:

self.inputDevice = 0; // or 1 - second item 

und:

<select> 
     <option ng-repeat="i in viewmodel.inputDevices" 
       value="{{i.label}}" 
       ng-selected="viewmodel.inputDevices.indexOf(i) == viewmodel.inputDevice" 
     >{{i.label}}</option> 
    </select> 

funktionieren diese Weise
Jeder möglicher Vorschlag
Dank

Answer 1

Sie können entweder speichern den Wert anstelle des Objekts als Maxim hat gezeigt, oder Sie können den richtigen Wert aus dem inputDevices Array mit so etwas wie ziehen:

self.inputDevice = self.inputDevices.filter(function(item) { 
    return item.value == storedValue.value; 
})[0]; 

nach an updated fiddle

Answer 2

Statt dankbar.

Fest Demo Fiddle

Answer 3

Der Code in der ursprünglichen Frage funktioniert f oder mich:

<div ng-app> 
    <div ng-controller="Ctrl"> 
    <select ng-model="viewmodel.inputDevice" 
     ng-options="i.label for i in viewmodel.inputDevices"> 
    </select> 

    <!-- displays the initial and any further selections 
     correctly as : {"value":"1","label":"input1"} --> 
    <span>{{viewmodel.inputDevice}}</span> 
    </div> 
</div> 

Ihre js Code Code funktioniert ohne Zweifel, aber das Ansichtsmodell kann ein wenig leichter bauen sein:

function Ctrl($scope) { 
// view model 
    $scope.viewmodel = {inputDevices: [ 
         {value: '1', label: 'input1'}, 
         {value: '2', label: 'input2'} 
        ]}; 
    $scope.viewmodel.inputDevice = $scope.viewmodel.inputDevices[0]; 

}

jsfiddlehttp://jsfiddle.net/8t2Ln/39/