AngularJS Example:
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
<div ng-controller="ctrl">
<div ng-repeat="(key, value) in items.params">
<div ng-switch="key">
<div ng-switch-when="deal_id">
DEALID: <input type="text" ng-model="dealIdModel"/> -- {{dealIdModel}}
</div>
<div ng-switch-when="thing_id">
THING: <input type="text" ng-model="thingIdModel.test"/> -- {{thingIdModel.test}}
</div>
<div ng-switch-default>
DEFAULT: <input type="text" placeholder="email" ng-model="items.params.email"/> -- {{items.params.email}}
</div>
</div>
</div><br/><br />
ITEMS.PARAMS.EMAIL OUTSIDE OF LOOP: {{items.params.email}}<br/>
THING OUTSIDE OF LOOP: {{thingIdModel.test}}<br />
DEALID OUTSIDE OF LOOP: {{dealIdModel}}
</div>
</div>
CSS
.done-true {
text-decoration: line-through;
color: grey;
}
JavaScript
function ctrl($scope) {
$scope.items = {
"statusCode":"ACTIVE",
"params":{
"deal_id":"",
"thing_id":"",
"email":"Change me! I will get called"
}
};
$scope.dealIdModel = "I won't change outside of the loop or get called.";
$scope.thingIdModel = {test:'Change me! So will I!'};
$scope.$watch('items.params.email', function (now, then, scope) {
console.log('email change', now, then);
});
$scope.$watch('thingIdModel.test', function(now, then, scope) {
console.log('changed the thing', now, then);
});
$scope.$watch('dealIdModel', function(now, then, scope) {
console.log('dealID changed:', now, then);
});
}