How to change one-time binding data in AngularJS?

Question

I have a div which show details like mobilenumber, name etc. like {{::mobilenumber}}, {{::name}}

In that div, there is a button that renders the same values in the new form

By using the button in the form, the user can change the values but in the div where I am showing details, values don't change after clicking on the button

<form ng-submit="form.$valid && saveDetails()">
  <input type="text" class="form-control capitalize" placeholder="Full Name" name="fullname"ng-model="address.fullname" maxlength="50"  ng-trim="true" autocomplete="off" required >
  <span><!-- Mobile Number required --></span>

  <input type="text" class="form-control capitalize" placeholder="Mobile Number" name="mobilenumber" id="mobilenumber"                        ng-model="address.mobilenumber" ng-minlength="10" maxlength="12"  ng-trim="true" autocomplete="off" required>
  <span><!-- Mobile Number required --></span>

  <button ng-click="form.submitted=true><span>Update User Details</span</button>
</form>

Do I want to use one-way binding only?

I tried using $scope.$broadcast('$$rebind:refresh'); but still values don't change.

Any help or guidance would be very helpful for me.

The values don't change because you use one time binding (`::mobilenumber`), so it won't update to any new data. It seems you want to update it, so why do you use one time binding? — devqon, Jan 04 '17 at 13:22
Actually I want to show only my update data in the div when user update the form only otherwise it should not update before the button click that update the form — VIKAS KOHLI, Jan 04 '17 at 13:34
Why do you use one-time binding if you don't want one-time binding? — a better oliver, Jan 04 '17 at 13:39
@Maximus Now I also shared my form tag in my question. Please see the updated question — VIKAS KOHLI, Jan 04 '17 at 14:05
_In that div, there is button that renders the same values in the new form_ - where is this div? — Max Koretskyi, Jan 04 '17 at 14:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132302/discussion-between-maximus-and-vikas-kohli). — Max Koretskyi, Jan 04 '17 at 14:30

score 0 · Answer 1 · answered Jan 04 '17 at 13:23

If you really want to keep some sort of one-way-binding...

What you could do, is just use two way binding but with a dataset in between. It gives some overhead but it is a possible solution to your problem. In order to update the view, you just update the copied data. You can control when the data in the view is updated.

Max Koretskyi · Answer 2 · 2017-01-04T14:51:27.763

0

When you use interpolation {{mobilenumber}} in your html, angular creates a watcher that watches the property mobilenumber on a scope:

$scope.$watch('mobilenumber', function() {
   // update DOM
});

Whenever the value changes, DOM is updated.

However, if you use one time binding {{:mobilenumber}}, as soon as your callback receives truthy value, angular removes the watcher:

var unwatch = $scope.$watch('mobilenumber', function() {
   if (value) {
     // update DOM
     unwatch();
   }
);

And since there is no more watcher for mobilenumber, whenever you update values on the scope inside your saveDetails() method, the callback is not triggered and DOM is not updated.

If you're planning on updating values constantly, you should not use one time binding. Use regular bindings:

<div>{{mobilenumber}}</div>

edited Jan 04 '17 at 14:51

answered Jan 04 '17 at 13:25

Max Koretskyi

85,840
48
270
414

Actually I want to show only my update data in the div when user update the form only otherwise it should not update before the button click that update the form. So is there any other way to do that ? – VIKAS KOHLI Jan 04 '17 at 13:37
@VIKASKOHLI, please see my updated answer you can [join the chat](http://chat.stackoverflow.com/rooms/132302/discussion-between-maximus-and-vikas-kohli) if there is anything unclear – Max Koretskyi Jan 04 '17 at 14:52

How to change one-time binding data in AngularJS?

2 Answers2