通过 ng-model 更新不同的 $scope 对象属性答案

【问题标题】：Updating different $scope object properties via ng-model通过 ng-model 更新不同的 $scope 对象属性
【发布时间】：2016-02-28 00:53:40
【问题描述】：

请看下面的代码。在输入字段中插入有效值时，为什么 $scope.data 变量不更新？我怎样才能做到这一点？

Codepen：http://codepen.io/uloco/pen/jboorN

HTML

<div ng-app="app" ng-controller="AppController" class="content">
    <input type="tel" ng-model="form.phone" placeholder="phone" />
    <input type="email" ng-model="form.email" placeholder="email" />
    <p>{{form}}</p>
    <p>{{data}}</p>
</div>

JS

angular
.module('app', [])
.controller('AppController', function($scope) {
    $scope.form = {};
    $scope.data = {
        foo: 'bar',
        phone: $scope.form.phone,
        email: $scope.form.email
    }
});

【问题讨论】：

标签： javascript angularjs data-binding angular-ngmodel angularjs-ng-model

【解决方案1】：

为什么 $scope.data 变量没有更新？

因为$scope.data 和$scope.form 之间没有联系。这是两个具有独立属性的独立对象，您正在更改 $scope.form 的属性。

如果你真的想拥有两个单独的对象，你需要手动将它们同步到$scope.$watch $scope.form

$scope.$watch('form', function(obj) {
    $scope.data.phone = obj.phone;
    $scope.data.email = obj.email;
}, true);

演示：http://codepen.io/anon/pen/PPvvBr?editors=101

或使用ngChange 指令：

<input type="tel" ng-model="form.phone" placeholder="phone" ng-change="sync()" />
<input type="email" ng-model="form.email" placeholder="email" ng-change="sync()" />

和

$scope.sync = function() {
    $scope.data.phone = $scope.form.phone;
    $scope.data.email = $scope.form.email;
};

演示：http://codepen.io/anon/pen/bVyyQN?editors=101

ngChange 在这种情况下是首选解决方案。但是，如果您有超过 2 个字段，那么 $watch 可能会更简单。

【讨论】：

这比我的回答要好。使用手表。
不，我认为它增加了一个额外的手表，所以为了更好的性能，ng-change 更可取。
@ParthaSarathiGhosh 我也认为 ngChange 更好，至少对于少数字段而言。
我需要两个独立的对象，因为其中一个是另一个的超集。我真正想要的是在自定义指令中插入 $scope.data 值，这应该在我更改 ng-model 值时更新。
这也可以通过 ng-model-settings 使用 getter/setter 来实现吗？

【解决方案2】：

您的 $scope.data 已分配一次，不会因电话或电子邮件更改而更改。

尝试使用 $watchGroup

$scope.$watchGroup(['form.phone', 'form.email'], function(newValues, oldValues, scope) {
  scope.data = {
        foo: 'bar',
        phone: scope.form.phone,
        email: scope.form.email
 }
});

【讨论】：

【解决方案3】：

$scope.form.phone 和 $scope.form.email 在控制器设置时分配，它们都未定义。即使 $scope.form 发生变化，$scope.data 也不知道，因为它存储的所有内容都是“未定义的”。

要检索数据，您可以实现如下函数：

$scope.getData = function () {
    return {
        foo: 'bar',
        phone: $scope.form.phone,
        email: $scope.form.email
    };
};

这可确保在您需要时重新初始化对象。

【讨论】：

【解决方案4】：

你可以尝试添加 ng-change:

 $scope.change = function(data){
        $scope.data.phone = data.phone;
        $scope.data.email = data.email;
    };

在 HTML 上

<input type="tel" ng-model="form.phone" placeholder="phone" ng-change="change(form);"/>
<input type="email" ng-model="form.email" placeholder="email" ng-change="change(form);"/>

【讨论】：

【解决方案5】：

你可以使用 HTML

<div ng-app="app" ng-controller="AppController" class="content">
    <input type="tel" ng-model="form.phone" placeholder="phone" />
    <input type="email" ng-model="form.email" placeholder="email" />
    <p>form: {{form}}</p>
    <p>data: {{data()}}</p>
</div>

JS

angular
    .module('app', [])
    .controller('AppController', function($scope) {
        $scope.form = {};
        $scope.data = function() {
            return {
                foo: 'bar',
                phone: $scope.form.phone,
                email: $scope.form.email
            };
        }
    });

更新的代码笔：http://codepen.io/anon/pen/Xmwwye

【讨论】：