Обновление различных свойств объекта $ scope через ng-модель

Question

Пожалуйста, ознакомьтесь с приведенным ниже кодом. Почему переменная $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 
    } 
}); 

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

Demo: 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 раствор является предпочтительным в этом случае. Однако, если у вас больше двух полей, тогда $ watch может быть проще.

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

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

Это гарантирует, что объект свеж инициализируется, когда вам это нужно.

Answer 4

вы можете попробовать добавить нг-изменение:

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

обновленный codepen: http://codepen.io/anon/pen/Xmwwye