Выбранное значение не отображается на AngularJS. Выберите

Моя проблема в том, что когда я изменяю значение раскрывающегося меню, значение не отображается в раскрывающемся меню, но правильное значение отображается на моей консоли. Не уверен, почему он не работает в данный момент, потому что у меня такая же реализация этого в другом проекте. Может быть, я обозреваю вещи.Выбранное значение не отображается на AngularJS. Выберите

На инициализации я установить

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

Fiddle вы можете найти здесь: https://jsfiddle.net/596tzsh8/7/

источник

2016-11-01 Lars Mertens

'Id' свойство ваше значение, так' SELECTED_TYPE = типы [0] .Id' должны работать – tymeJV

Вы должны изменить 'нг-options' это:' ng- options = "type as type.Name для типа в типах track by type.Id" 'потому что ваша' ng-model' - это сам тип, а не идентификатор. См. Это [jsfiddle] (https://jsfiddle.net/596tzsh8/14/) – devqon

Использование:

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

... вместо:

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

Затем, в вашей функции обратного вызова, replac е:

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>

источник

2016-11-01 11:56:08 ccjmne

Спасибо! Уже чувствовалось, что это было не так сложно, но просто не мог найти ошибку. –

Вы можете изменить выбор следующим образом,

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

также вы можете иметь переменную $ области действия и отобразить его на нг-изменения

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

DEMO

источник

2016-11-01 11:54:40 Sajeetharan

Выбранное значение не отображается на AngularJS. Выберите

ответ

Смежные вопросы