ng-options zeigt leere ausgewählte Option, obwohl ng-Modell definiert ist

Ich habe eine Plunkr erstellt, um das Problem zu betonen, vielleicht liegt es daran, dass die Quelle der ng-Wiederholung eine Funktion ist, bin ich mir nicht sicher, aber so weit Ich habe alles versucht, um das zu lösen, und konnte es nicht schaffen.ng-options zeigt leere ausgewählte Option, obwohl ng-Modell definiert ist

plunkr: http://plnkr.co/edit/qQFsRM?p=preview

HTML

<html> 

    <head> 
    <script data-require="[email protected]" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app='myApp' ng-controller='mainCtrl'> 
    <ng-include src="'menu.html'"> 
    </ng-include> 

</html>

Script

var app = angular.module('myApp', []); 

app.controller('mainCtrl', function($scope, $httpBackend){ 
    $scope.model = {}; 
    $scope.model.myJobs = {}; 
    $scope.refreshJobs = function(){ 

    } 
}); 

app.controller('menuCtrl', function($scope){ 

$scope.model.locations = function(){ 
    var loc = []; 
    loc[1] = 'Dublin'; 
    loc[2] = 'Stockholm'; 
    loc[3] = 'New Jersy'; 
    $scope.model.selectedLocationDef = loc.indexOf('Dublin'); 
    return loc; 
} 
    $scope.model.selectedLocation = $scope.model.selectedLocationDef; 

$scope.$watch('model.selectedLocation', function(location){ 
    $scope.refreshJobs(location); 
}); 

});

Quelle

2013-08-20 Oleg Belousov

Es ist eine gute Sache, externe Links zu Ihren Live-Beispielen zu veröffentlichen, aber es wäre besser, den tatsächlichen Code in dieser Frage (auch) zu veröffentlichen. Was, wenn Plunkr irgendwann offline geht? –

Ich habe meine Frage –

Zuletzt hab ich gecheckt, Angular unterstützt nicht die Fähigkeit Array-Schlüssel zu binden ng-Modell über ng-Optionen. Sie können jedoch imitieren dieses Verhalten ein Objekt Hash mit:

menu.html:

<div ng-controller="menuCtrl"> 
    <select ng-model="model.selectedLocation" ng-options="x.value as x.label for x in model.locations()"> 
    </select> 
</div>

script.js:

$scope.model.locations = function(){ 
    var loc = [{ 
    value: 0, 
    label: 'Dublin' 
    }, { 
    value: 1, 
    label: 'Stockholm' 
    }, { 
    value: 2, 
    label: 'New Jersey' 
    }]; 

    $scope.model.selectedLocation = 1; // Set default value 
    return loc; 
}

Beachten Sie, dass dies die ganzen Zahlen binden an Ihre Modell, und nicht die Städte selbst. Wenn Sie Ihren Modellwert wollen Dublin, Stockholm oder New Jersey sein, einfach tun:

menu.html:

<div ng-controller="menuCtrl"> 
    <select ng-model="model.selectedLocation" ng-options="name for name in model.locations()"> 
    </select> 
</div>

script.js:

$scope.model.locations = function(){ 
    var loc = ['Dublin', 'Stockholm', 'New Jersey']; 
    $scope.model.selectedLocation = 'Dublin'; // Set default value 
    return loc; 
}

Quelle

2013-08-20 13:53:25 bibs

überarbeitet Danke! Nur, wenn Sie es so machen, können Sie den Wert nicht ändern, da Sie das Attribut model.selectedLocation immer wieder setzen werden –

Wenn Sie ein Array verwenden, wie Modell, dann ist das Modell eine Zeichenfolge, keine Nummer. Sie müssen also die Zahl in eine Zeichenfolge umwandeln. Einfach versuchen

$scope.model.selectedLocation = '1';

Quelle

2013-08-20 14:08:55 zsong

+1, das ist eine bessere Antwort. – bibs

Das ist die richtige Antwort. – Nighto

@zsong Ich habe dies nicht als neue Frage gepostet, aber ich habe etwas ähnliches. Nicht sicher, warum es nicht die richtige Option auswählt. http://plnkr.co/edit/DmvqkS9SqTfRQQH59p72?p=preview –

ng-options zeigt leere ausgewählte Option, obwohl ng-Modell definiert ist

Antwort

Verwandte Themen