Javascript 通过ng模型更新不同的$scope对象属性

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

代码笔：

HTML

为什么$scope.data变量不更新

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

如果您真的想拥有两个独立的对象，则需要手动将它们与$scope.form上的$scope.$watch同步

演示：

或使用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()" />

演示：

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

为什么$scope.data变量不更新

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

如果您真的想拥有两个独立的对象，则需要手动将它们与$scope.form上的$scope.$watch同步

演示：

或使用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()" />

演示：

---

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

您的$scope.data只需更改一次，不会在电话或电子邮件中更改

尝试使用$watchGroup

---

您的$scope.data只被更改了一次，而不是通过电话或电子邮件更改

尝试使用$watchGroup

---

$scope.form.phone和$scope.form.email在控制器设置中分配，两者都未定义。即使$scope.form更改，$scope.data也不知道，因为它存储的所有内容都未定义

要检索数据，可以实现如下功能：

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

---

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

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

要检索数据，可以实现如下功能：

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

---

这样可以确保在需要时新初始化对象。

您可以尝试添加ng更改：

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

---

您可以尝试添加ng更改：

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

你可以用 HTML

更新的代码笔：

您可以使用 HTML

---

更新代码笔：

这比我的答案好。使用watch。不，我认为它添加了一个额外的watch，因此为了更好的性能，ng change更可取。@ParthaSarathiGhosh我也认为ngChange更好，至少对于少量字段。我需要两个单独的对象，因为其中一个是另一个的超集。我真正想要的是在自定义指令中插入$scope.data值，这应该随着我更改ng模型值而更新。这也可以通过ng模型设置使用getter/setter实现吗？这比我的答案要好。使用watch。不，我认为它添加了一个额外的watch，因此为了更好的性能，ng change更可取。@ParthaSarathiGhosh我也认为ngChange更好，至少对于少量字段。我需要两个单独的对象，因为其中一个是另一个的超集。我真正想要的是在自定义指令中插入$scope.data值，这应该在我更改ng模型值时更新。这也可以通过ng模型设置使用getter/setter实现吗？

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

<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>

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