Unable to update value without page refresh

[pravinkumart]

I try to set a value based on value in another field . The scope gets updated, but xeditable cant update in form.

I tried the same using plain angularjs without xeditable just using ng-model.It works.But with xeditable its not working.

Here is the sample js fiddle link : http://jsfiddle.net/pravinkumart/3Mc93/

Please some one help me to fix it.

[tthew]

Use $watch

    $scope.$watch('a', function (val) {
        $scope.b = val; 
    });

JSFiddle

[pravinkumart]

Thank you for your solution. But i would like to do it in form like this.. http://jsfiddle.net/pravinkumart/BfL9D/2/

When i start typing or at the end of type(focus out of the box), the value in the name text box should reflect in user name text box before clicking on save button.

[pasine]

I have a similar problem.
I am updating the model within a directive.
The model is correctly updated in the scope of the controller, but the view does not change.
I also tried to manually trigger $scope.$apply(), but nothing happens.

[uqee]

As I see it, it's just not possible because xeditable deliberately detaches field value from the model to perform its own data checks (onbeforesave, etc.) before updating the model back. So it's not an issue but a feature)

[pasine]

I understand this, but is this necessary? Wouldn't it be easier to deal directly with the model? Wouldn't this add out of the box features like native validation and two-way binding?

[ahneo]

Hi, I solved this problem by setting the value of the input via angular.element.

angular.element($('input[name="myInputName'"]')).val("myInputValue");

[joseaquino]

The problem on setting the value through the use of jQuery/jQlite is that the form won't know the value has changed and the form states won't be updated like if the form is $valid or $invalid.

I have found a solution but it is a little hard coded, from the forms controller access the property $editables and select the arrat element corresponding to the input you want to update and update the value in scope.$data. Here is the full code:

// Inside your controller
$scope.formName.$editables[0].scope.$data = newValue;

Another way I found but it required editing the source code is to add the following line inside the watch on line 435:

// Line 435 inside /angular-xeditable/dist/js/xeditable.js
$scope.$parent.$watch($attrs[self.directiveName], function(newVal, oldVal) {
  self.setLocalValue();
  self.handleEmpty();
});

So that everytime the main model value assigned to the field changes it updates the internal model.

[kirakishin]

Hello, i have the same problem.
Your first solution works but not the second for me.
anyway, i use also some validation with pattern and when we update with
🔢 $scope.formName.$editables[0].scope.$data = newValue;
it does'nt works because of the pattern validation : get undefined value in the input.

see : http://jsfiddle.net/kirakishin/4o7jkj4a/

anyone has an idea please ?

i think to not use ng-pattern but the custom validation of xeditable with onebeforesave.

[Sampath-Lokuge]

@joseaquino I have used your 1st solution.It's working fine.Thanks for the Great work :)

[eugef]

Solution by @joseaquino works but it is definitely a workaround.
Form should watch changes of the scope and updated itself.