通過ng-model更新不同的$ scope對象屬性

請看下面的代碼。當在輸入字段中插入有效值時，爲什麼$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>

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

來源

2015-11-25 uloco

爲什麼在$ 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()" />

and

$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可能會更簡單。

來源

2015-11-25 09:45:39 dfsq

這比我的回答更好。使用手錶。 –

不，我認爲它增加了一個額外的手錶，所以爲了獲得更好的性能，ng-change是更可取的。 –

@ParthaSarathiGhosh我也認爲ngChange更好，至少對於少數領域。 – dfsq

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

來源

2015-11-25 09:45:44

$ scope.form.phone和scope.form.email $在控制器設置在那裏他們都是不確定的分配。即使$ scope.form發生變化，$ scope.data也不知道，因爲它存儲的所有內容都是「未定義的」。

檢索數據，你可以實現像這樣的功能：

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

這可以確保當你需要它的對象是新鮮初始化。

來源

2015-11-25 09:46:12 Florian

你可以嘗試添加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);"/>

來源

2015-11-25 09:49:35

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

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

來源

2015-11-25 09:56:44 vpsingh016

通過ng-model更新不同的$ scope對象屬性

回答

相關問題