Auswahl des Standardwertes für ng-Optionen in Angular

Question

Ich habe zwei Dropdown-Listen, eine davon ist abhängig von der anderen. Ich hatte ursprünglich meinen Code mit ng-repeat, aber lies, dass es effizienter ist, ng-options zu verwenden. Allerdings kann ich beim Umschalten nicht ng-selected für den Standard verwenden.

Ich habe verschiedene Methoden zum Festlegen der Standardoption in ng-Optionen untersucht, aber sie verwenden entweder <option value="">Select Something Here</option> für eine benutzerdefinierte Option oder direkt aus dem Dataset auswählen. Aber mein Wert wird sich ändern.

ist hier ein Arbeits Plunker mit ng-repeat:

http://plnkr.co/edit/Ie4VDDlrwSUSqIq7laoa?p=preview

ist hier ein Plunker die Standard mit ng-Option fehlt:

http://plnkr.co/edit/TGoWTMqOuJnWKNTUARWI?p=preview

Der Standardwert $scope.defnum sein sollte , die aus einem anderen Dataset als die Werte in meinem Dropdown-Menü stammt. Daher möchte ich den Standardwert DefCom = defnum haben. Ich habe versucht, dies zu tun mit ng-init durch eine ursprüngliche Variable in der Steuerung zuweisen:

$scope.defcom = 4; 
var original_defcom = $scope.defcom; 

und mit ng-init="original_defcom" in der Vorlage.

und in ng-Modell, Einwickeln es sogar in einem <option> Tag

Answer 1

dies in den ng-Optionen

<select ng-model="defcom" 
    ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" > 
</select> 

Dann Haben Sie de ändern die $ scope.defcom Typ entsprechen Array. Im Plocker ist die Variable eine Zahl und das Array ist voll mit Strings. Sie müssen einen von ihnen ändern. Wenn ich wo wäre, würde ich den Typ der Eigenschaften in den Objekten im Array ändern. Die ng-Optionen analysieren die Zahlen automatisch.

Dies ist eine Version Ihrer Plunker afters ein paar Änderungen:

http://plnkr.co/edit/tIeDEC8MxfcvnRrc0Njh?p=preview

Answer 2

wie dies versuchen.

und diese Änderung: $scope.defcom = "4";

<select ng-model="defcom" ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >> 

// Code goes here 
 

 
angular.module("app", []) 
 
    .controller("MainCtrl", function($scope) { 
 
    $scope.test = "This is a test"; 
 
    $scope.defcom = "4"; 
 
    var original_defcom = $scope.defcom; 
 
    var original_com = $scope.com; 
 
    
 
    $scope.acct_info = [ 
 
     { 
 
     "Req": "MUST", 
 
     "DefCom": "1" 
 
     }, 
 
     { 
 
     "Req": "NoMUST", 
 
     "DefCom": "5" 
 
     }, 
 
     { 
 
     "Req": "MUST", 
 
     "DefCom": "4" 
 
     }, 
 
     { 
 
     "Req": "MUST", 
 
     "DefCom": "7" 
 
     } 
 
    ]; 
 
    
 
    $scope.cust_info = [ 
 
     { 
 
     "Customer": "1", 
 
     "Com": "1" 
 
     }, 
 
     { 
 
     "Customer": "2", 
 
     "Com": "1" 
 
     }, 
 
     { 
 
     "Customer": "3", 
 
     "Com": "4" 
 
     }, 
 
     { 
 
     "Customer": "4", 
 
     "Com": "4" 
 
     }, 
 
     { 
 
     "Customer": "5", 
 
     "Com": "7" 
 
     }, 
 
     { 
 
     "Customer": "6", 
 
     "Com": "7" 
 
     }, 
 
     { 
 
     "Customer": "7", 
 
     "Com": "7" 
 
     } 
 
    ]; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <h1>Hello Plunker!</h1> 
 
    <div ng-controller="MainCtrl"> 
 
     <p>{{ test }}</p> 
 
     <select ng-model="defcom" ng-options="opt.DefCom as opt.DefCom for opt in acct_info | filter:{Req:'MUST'}:true" >> 
 
    </select> 
 
    
 
    </div> 
 
    </div>

`