選択した値がAngularJSに表示されない選択

Question

私の問題は、ドロップダウンメニューの値を変更するときに値がドロップダウンメニューに表示されないが、正しい値がコンソールに表示されることです。なぜ私は別のプロジェクトでこれと同じ実装をしているので、現時点では動作していないのか分かりません。たぶん私は物事を見落としている。私は

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

あなたがここで見つけることができますフィドル設定初期化時に

：https://jsfiddle.net/596tzsh8/7/

Answer 1

用途：

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

：代わりの

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

...

あなたのコールバック関数では、replac E：

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

...によって：

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

...そして、あなたはすべてのセットです！

フォークされたJSFiddle hereを参照するか、以下のスニペットで遊んでください。

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>

Answer 2

を次のようにあなたが選択を変更することができ、

<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()"> 

また、あなたは$スコープ変数を持ち、NG-変化にそれを表示することができます

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

DEMO