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

Updating different $scope object properties via ng-model

本文关键字：scope 对象 属性 ng 模型 更新 通过      更新时间：2023-09-26

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

代码笔：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
    }
});

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

因为CCD_ 2和CCD_ 3之间没有连接。这是两个具有独立属性的独立对象，您正在更改$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

在这种情况下，CCD_ 8溶液是优选的。然而，如果您有超过2个字段，那么$watch可能会更简单。

您可以尝试添加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);"/>

$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.data只进行了一次签名，不会在电话或电子邮件更改时更改。

尝试使用$watchGroup

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

您可以使用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

相关文章：