在AngularJS中,Deep $watch是一个集合
Deep $watch a collection in AngularJS
这是我的对象:
$scope.steps = {
service: {
selected_service: '',
selected_month: '',
selected_year: '',
selected_day: ''
},
payment: {
selected_dd_type: '',
cc: {
selected_card_type: '',
credit_card_number: '',
name_on_card: '',
expiry_month: '',
expiry_year: ''
},
bank_acc: {
bsb_number: '',
account_number: '',
account_holder_name: ''
}
},
agreement: {
agreement_acceptance: false
}
}
以下是$watchCollection
:
$scope.$watchCollection('steps.service', function(newVal, oldVal) {
$scope.canExit = true;
});
$scope.$watchCollection('steps.payment', function(newVal, oldVal) {
$scope.canExit = true;
}, true);
$scope.$watchCollection('steps.payment.cc', function(newVal, oldVal) {
$scope.canExit = true;
}, true);
$scope.$watchCollection('steps.payment.bank_acc', function(newVal, oldVal) {
$scope.canExit = true;
}, true);
$scope.$watchCollection('steps.agreement', function(newVal, oldVal) {
$scope.canExit = true;
}, true);
一切正常。
必须有一个更好的方法来$watch
$scope.steps
对象
如果我$watch
steps
它不会工作。我猜Angular看得不够深
$scope.$watchCollection('steps', function(newVal, oldVal) {
$scope.canExit = true;
}, true);
谢谢您的指导
给你。传递值true
作为$watch
中的第三个选项:
$scope.$watch('steps', function(newValue, oldValue) {
// callback on deep watch
$scope.canExit = true;
}, true);
另外,请确保在watch中添加if
条件,因为当您将值赋给$scope.steps
时,watch也将被触发。
工作的例子:
var app = angular.module("sa", []);
app.controller("FooController", function($scope) {
$scope.canExit = false;
$scope.steps = {
service: {
selected_service: '',
selected_month: '',
selected_year: '',
selected_day: ''
},
payment: {
selected_dd_type: '',
cc: {
selected_card_type: '',
credit_card_number: '',
name_on_card: '',
expiry_month: '',
expiry_year: ''
},
bank_acc: {
bsb_number: '',
account_number: '',
account_holder_name: ''
}
},
agreement: {
agreement_acceptance: false
}
};
$scope.reset = function() {
$scope.canExit = false;
}
// Using Math.random() just for demo so that the watch can be invoked
$scope.changeService = function() {
$scope.steps.service.selected_service = Math.random();
}
$scope.changeDate = function() {
$scope.steps.payment.cc.selected_card_type = Math.random();
}
$scope.changeAgreement = function() {
$scope.steps.agreement.agreement_acceptance = Math.random();
}
$scope.$watch('steps', function(newValue, oldValue) {
if (newValue && (newValue !== oldValue)) {
// callback on deep watch
$scope.canExit = true;
}
}, true);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="sa" ng-controller="FooController">
<button ng-click="changeService()">Change service</button>
<button ng-click="changeDate()">Change expiry date</button>
<button ng-click="changeAgreement()">Change agreement</button>
<br>
<br>
<br>Can exit: {{canExit}}
<button ng-click="reset()">Reset</button>
</div>
1)正如caramiriel在评论中所说,你可以使用带函数参数的$watch;
$watch(
function(){
var calculatedVal = /*make all required checks*/;
return calculatedVal;
},
function(newVal){
$scope.canExit = true;
}
);
2)更好的选择是完全避免监视,并使用事件/回调,如ng-change;
相关文章:
- Meteor.js只更新一个参数,而不是整个集合
- 如何查找流星集合中最后一个元素/对象的id
- 包含一个集合的1到3个成员但其中一个成员不能单独存在的正则表达式
- 将一个对象集合映射到汇总集合的单个对象
- 如何将两个集合转换为一个集合
- Meteor:访问另一个集合,每个块中有一个id
- 主干-用一个请求替换整个集合
- 如何计算mongodb中两个集合中一个字段的不同值的数量
- 组织一个backbone.js集合
- 如何在集合中指定模型的一个属性
- Backbone.js视图可以有一个模型和一个集合吗
- 另一个集合视图中的集合视图
- 如何使用Angular 2服务提供包含指向另一个资源的链接/ids的资源集合
- Backbone.Collection 获得第一个 n 作为新集合
- Mongo-Aggregate:如何与另一个集合中的字段进行比较
- Meteor - 将 mongodb 查询分配给变量并将其插入到另一个集合
- 在 Backbone.js 中为集合中的一个元素创建详细信息页面
- 基于 MongoDB 中另一个集合中的数据查询一个集合中的数据
- 流星 - 将数据从一个集合移动到另一个集合
- 更改一个对象的可观察属性会更改集合中所有对象的属性