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
Post a Comment