AngularJS model bound with two fields -


i have object following:

  myobj{     groups:[{name:"test1": xdata:"[1,2,3]"  }, {name:"test2": xdata:"[5,6,7]"  }]   } 

i have represent these values in 2 different views on same page. first view renders xdata , ydata in textareas, uses splitarray directive display values 1,2,3 1 value @ each line in text area.

 <textarea   split-array="" ng-model="group.xdata"  > </textarea> 

second view shows these values in textboxes. xdata split 3 textboxes following

 <input type="text" ng-model="group.xdata[0]" >  <input type="text" ng-model="group.xdata[1]" > 

following splitarray directive

mymodule.directive('splitarray', function() {     return {         restrict: 'a',         require: 'ngmodel',         link: function(scope, element, attr, ngmodel) {              function fromuser(text) {                 return text.split("\n");             }              function touser(array) {                     return array.join("\n");             }              ngmodel.$parsers.push(fromuser);             ngmodel.$formatters.push(touser);         }     }; }) 

when make change in view1(textarea) can correctly see changed values in second view (textboxes) when make change in view2 change not reflected in textareas. when console.log on change in textboxes can see model shows new values. question why model changes not being reflected in textareas, need make change in splitarray directive?

this seems design ngmodel doesn't handle objects or arrays. in ngmodelcontroller code l1085-l1089), !== operator used compare see if model value has changed. since $modelvalue equal value (xdata) when xdata[*] changes, ngmodelcontroller doesn't detect changes model.

however, can workaround adding watcher in directive invalidate $modelvalue whenever watcher called.

scope.$watchcollection(attr.ngmodel, function (newvalue, oldvalue) {   ngmodel.$modelvalue = oldvalue; }); 

here plunker demonstrates workaround: http://plnkr.co/edit/mul577?p=preview

another way use ngchange directive on input fields invalidate model value. however, introduces coupling between directives.


there issue on angularjs tracking this: https://github.com/angular/angular.js/pull/2553

also, split-array directive here doing nglist doing. however, nglist doesn't respect separator on when rendering view (https://github.com/angular/angular.js/pull/2561).


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -