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

Question

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

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
    }
});

Answer 1

Why does the $scope.data variable not update?

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

的属性

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

$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 可能会更简单。

Answer 2

您的 $scope.data 已分配一次，不会在 phone 或电子邮件更改时更改。

尝试使用$watch Group

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

Answer 3

$scope.form.phone 和 $scope.form.email 在控制器设置时分配，它们都未定义。即使 $scope.form 改变了，$scope.data 也不知道，因为它存储的只是 "undefined".

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

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

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

Answer 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);"/>

Answer 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

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

Updating different $scope object properties via ng-model

javascript

data-binding

angularjs

angular-ngmodel

angularjs-ng-model