Почему ng-model не обновляет выбор значения контроллера?

Это код HTML:

<div ng-controller="SelectCtrl">
    <p>selected item is : {{selectedItem}}</p>
    <p> age of selected item is : {{selectedItem.age}} </p>
    <select ng-model="selectedItem" ng-options="item.name for item in items">
    </select>
</div>

Это код AngularJS:

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

app.controller('SelectCtrl', function($scope) {
    $scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
    $scope.selectedItem = $scope.items[0];
    console.log($scope.selectedItem); //it's not update :(
});

в представлении новое значение обновляется каждый раз, когда я меняю выбор, но контроллер не обновляет текущее значение выбора. Что я должен делать?

Спасибо!


javascript html angularjs ng-options angularjs-ng-model
person alvarezsh    schedule 16.08.2015    source источник
comment
откуда вы знаете, что контроллер не имеет нового значения? в предоставленном вами коде вы вызываете console.log только один раз (при загрузке страницы).   -  person Claies    schedule 16.08.2015

Ответы (2)


arrow_upward
9
arrow_downward

Чтобы обновить или изменить значение внутри вашего контроллера, вы можете написать на нем функцию ng-change. Затем вы можете проверить обновленное значение внутри контроллера.

Разметка

<select ng-model="selectedItem" ng-options="item.name for item in items"
  ng-change="changeSelectedItem()">
</select>

Код

$scope.changeSelectedItem = function(){
   console.log($scope.selectedItem);
}

Другой способ может заключаться в том, что вы можете просто использовать {{selectedItem}} где-нибудь в html. Это также даст представление о том, как обновляется значение selectedItem.

person Pankaj Parkar    schedule 16.08.2015
comment
@VirajNalawade Вы должны пойти на это .. Спасибо за признательность .. :) - person Pankaj Parkar; 16.08.2015

arrow_upward
2
arrow_downward

Поскольку вы всегда берете первый элемент массива в контроллере,

$scope.selectedItem = $scope.items[0];
console.log($scope.selectedItem);

Просто измените свой JS вот так,

$scope.changeSelectedItem = function(){
   console.log($scope.selectedItem);
}

И View использует ng-change, чтобы получить выбранный элемент

<select ng-model="selectedItem" ng-options="item.name for item in items"
  ng-change="changeSelectedItem()">
</select>
person Sajeetharan    schedule 16.08.2015
comment
хм правда бывает :) - person Sajeetharan; 16.08.2015
comment
@alvarezsh, пожалуйста, отметьте как ответ, если это помогло - person Sajeetharan; 18.08.2015