Question

我视图中的以下代码与预期一样有效。每当我做出新选择时，player_id都会更新：

<div class="form-group">
    <select class="form-control" ng-model="player_id" ng-change="hithere();">
        <option ng-repeat="player in players" value="{{ player.id }}">{{ player.name }}</option>
    </select>
</div>
test works: {{ player_id }}

以下代码无法正常工作。我希望日志始终打印出与我在视图中看到的相同的值。但是它会打印默认值0，无论我在视图中选择什么。

$scope.player_id = 0;
...
$scope.hithere = function($event){
    console.log('Test does not work, prints 0');
    console.log($scope.player_id);
};

有什么问题？

Answer 1

这可能是一个范围问题。控制器中的$scope是HTML中作用域的父（或其他祖先）。

请改用：

$scope.data = {
  player_id: 0
}

然后在任何地方使用data.player_id而不只是player_id。

有关详细信息，请参阅Understanding Scopes。

Answer 2

此方案是使用ControllerAs语法的最佳候选者。

在HTML中使用ng-controller="NameOfController as vm"

然后HTML将如下所示，您无需将模型包装在额外的对象中。

<div class="form-group">
    <select class="form-control" ng-model="vm.player_id" ng-change="hithere();">
        <option ng-repeat="player in vm.players" value="{{ player.id }}">{{ player.name }}</option>
    </select>
</div>

ng-model设置的值不会在控制器中更新

2 个答案: