Ausgewählter Wert wird bei AngularJS nicht angezeigt Wählen Sie

Mein Problem ist, wenn ich den Wert des Dropdown-Menüs ändere, wird der Wert nicht im Dropdown-Menü angezeigt, aber der korrekte Wert wird in meiner Konsole angezeigt. Ich bin mir nicht sicher, warum es im Moment nicht funktioniert, weil ich dieselbe Implementierung in einem anderen Projekt habe. Vielleicht übersehe ich Dinge.Ausgewählter Wert wird bei AngularJS nicht angezeigt Wählen Sie

Bei der Initialisierung gesetzt i

selected_type = types[0] 
// What will result in Type1 being displayed on page load.

Fiddle finden Sie hier: https://jsfiddle.net/596tzsh8/7/

Quelle

2016-11-01 Lars Mertens

die 'Id' Eigenschaft ist der Wert, so' selected_type = Typen [0] .Id' sollte – tymeJV

arbeiten Sie sollten die 'ng-options' Um dies zu ändern:' ng- options = "type als type.Name für type in types track by type.Id" 'weil dein' ng-Modell' der Typ selbst ist, nicht die ID. Siehe hierzu [jsfiddle] (https://jsfiddle.net/596tzsh8/14/) – devqon

Verwendung anzuzeigen:

ng-options="selected_type as selected_type.Name for selected_type in types track by selected_type.Id" 
//    ^
//   the object itself

... statt:

ng-options="selected_type.Id as selected_type.Name for selected_type in types track by selected_type.Id" 
//    ^
//   the object's ID

Dann, in Ihrer Rückruffunktion, replac e:

var typeID = this.selected_type; 
//     ^
//    the object itself

... von:

var typeID = this.selected_type.Id; 
//      ^
//     the object's ID

... und du bist fertig!

Sehen Sie Ihre gespaltene JSFiddle here, oder spielen Sie mit dem Ausschnitt unten.

var app = angular.module("app", ["controllers"]) 
 

 
var controllers = angular.module("controllers",[]); 
 
controllers.controller('myController', function($scope){ 
 

 
\t $scope.types = [{ 
 
      Id: 1, 
 
      Name: 'Type1' 
 
     }, { 
 
      Id: 2, 
 
      Name: 'Type2' 
 
     }, { 
 
      Id: 3, 
 
      Name: 'Type3' 
 
    }]; 
 

 
    $scope.GetValueTypeDropdown = function() { 
 
    \t var typeID = this.selected_type.Id; 
 
    \t $scope.the_type = $.grep($scope.types, function (selected_type){ 
 
     \t return selected_type.Id == typeID; 
 
     })[0].Name; 
 
     console.log($scope.the_type); 
 
    return $scope.the_type; 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="myController"> 
 
     <form> 
 
      <select name="type" class="col-xs-12 dropdown-list" 
 
        ng-model="selected_type" class="col-xs-8" 
 
        ng-init="selected_type = types[0]" 
 
        ng-options="selected_type as selected_type.Name for selected_type in types track by selected_type.Id" 
 
        ng-change="GetValueTypeDropdown()"> 
 
      </select> 
 
     </form> 
 
    </div> 
 
</div>

Quelle

2016-11-01 11:56:08 ccjmne

Danke! Ich hatte schon das Gefühl, dass es nicht so schwer war, aber ich konnte den Fehler nicht finden. –

Sie können die Auswahl wie folgt ändern,

<select name="type" class="col-xs-12 dropdown-list" ng-model="selected_type" class="col-xs-8" ng-init="selected_type = types[0]" ng-options="type as type.Name for type in types track by type.Id" ng-change="GetValueTypeDropdown()">

auch können Sie einen $ scope Variable haben und es auf ng Wechsel

$scope.GetValueTypeDropdown = function() { 
console.log($scope.selected); 
};

DEMO

Quelle

2016-11-01 11:54:40 Sajeetharan

Ausgewählter Wert wird bei AngularJS nicht angezeigt Wählen Sie

Antwort

Verwandte Themen