[英]how to $watch multiple variables in angularjs?
這是一個angularjs指令,用於顯示多種形式驗證錯誤。
指令代碼-
app.directive('validationErrors', function($compile) {
return({
link : function($scope, el, attr) {
$scope.fld = attr.id;
$scope.individualValidationErrors = [];
var model = ((attr.ngModel).split('.'))[0];
$scope.validationErrors = {};
$scope.validationErrors[model] = {};
$scope.validationErrors[model][$scope.fld] = "";
var html = $compile(
'<div id="error-{{fld}}" style="color:red;">'+
'<ul>' +
'<li ng-repeat="error in individualValidationErrors[fld]">'+
'{{error}}' +
'</li>' +
'</ul>' +
'</div>'
)($scope);
$('input[id="'+$scope.fld+'"]').after(html);
$scope.$watch('validationErrors',
function(newV) {
$scope.fld = attr.id;
$scope.individualValidationErrors = [];
console.log(newV);
console.log($scope.validationErrors);
if ($scope.fld != undefined) {
$scope.individualValidationErrors[$scope.fld] = $scope.validationErrors[model][$scope.fld];
//console.log($scope.individualValidationErrors);
}
},
true
);
}
});
});
HTML代碼-
<form ng-submit="registration()">
<input validation-errors="validationErrors" maxlength="50" type="text" id="first_name" ng-model="User.first_name">
<input validation-errors="validationErrors" maxlength="50" type="text" id="last_name" ng-model="User.last_name">
<input validation-errors="validationErrors" maxlength="50" type="text" id="email" ng-model="User.email">
<input validation-errors="validationErrors" type="password" id="password" ng-model="User.password">
<input class="btn btn-info" type="submit" id="registration-sbmit" value="Submit">
</form>
表單的最后一個字段的錯誤將覆蓋表單中的所有字段,因此它不會顯示字段的單個錯誤。
我認為這里的主要問題是您正在覆蓋鏈接函數中的$ scope.validationErrors。 鏈接功能將針對頁面上的每個指令運行。 他們還共享同一個$ scope對象。 因此,您需要有條件地創建$ scope.validationErrors並有條件地向其添加頂級鍵:
if(!$scope.validationErrors)
$scope.validationErrors = {};
if(!$scope.validationErrors[model])
$scope.validationErrors[model] = {};
$scope.validationErrors[model][$scope.fld] = "";
至少應該可以解決您僅在$ scope.validationErrors中獲得最后一項的問題。
您可以這樣做:
$scope.$watch('[myproperty1,myproperty2,myproperty3]',function(nv,ov){
//do some stuff
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.