angularjs - 如何让 ng-init 触发 ng-change？

Question

我刚开始学习 Angular。有一个<select>应该用一些礼物之一填充下面的输入元素的元素。

这是我的看法。

<select
    ng-model="selection"
    ng-options="preset.name for preset in presets"
    ng-init="selection=presets[0]"
    ng-change="select()"></select>

<input ng-model="name" type="text"/>
<textarea ng-model="description"></textarea>

这是我的 Controller 。

$scope.presets = [
    { name: 'Lorem ipsum', description: 'Dolor sit amet.'   },
    { name: 'Consectetur', description: 'Adipisicing elit.' },
    { name: 'Sed do',      description: 'Eiusmod tempor.'   },
];

$scope.select = function() {
    $scope.name        = $scope.selection.name;
    $scope.description = $scope.selection.description;
};

当我加载页面时，我可以看到第一个选项被选中。但是在我手动更改选择之前，输入字段保持空白。为什么 Angular 不首先自动设置输入字段，我该怎么办？

Answer 1

它最初不设置文本字段的原因是因为在调用 select() 之前没有为 $scope.name 和 $scope.description 设置绑定(bind)。您最初可以在 Controller 功能中进行设置:

$scope.init = function(selected) {    
    $scope.selection = selected;
    $scope.name = $scope.selection.name;
    $scope.description = $scope.selection.description;
}
$scope.select = function() {
    $scope.name        = $scope.selection.name;
    $scope.description = $scope.selection.description;
};

在您的 HTML 中:

<select
    ng-model="selection"
    ng-options="preset.name for preset in presets"
    ng-init="init(presets[0])"
    ng-change="select()"></select>

替代方法:

或者，您可以将输入字段绑定(bind)到相同的选择模型。那样，
when the selection model is updated on the scope, it will update all the associated views.

将模型更改为“selection.name”和“selection.description”:

<input ng-model="selection.name" type="text"/>
<textarea ng-model="selection.description"></textarea>

不需要 select()不再起作用，因为在所选模型和输入字段之间已经存在双向绑定(bind)设置。