Need to remove binding for ng-if

Question

Code:

<label class="checkbox-inline">
    <input type="checkbox" name="activeFlag" id="active" 
            value="active" ng-checked="flag" ng-click="flag=!flag"/>
    <span ng-show="flag">Yes</span><span ng-show="!flag">No</span>
    <input ng-if="::flag" type="button" style="width:85px;" value="Active"
          class="btn btn-success btn-xs"/>
    <input ng-if="::!flag" type="button" style="width:85px;" value="Deactivated"
          class="btn btn-danger btn-xs"/>
</label>

Here as you can see, i need to toggle "Yes" to "No" when checkbox is clicked, but I don't need to change my button value once it is fixed. I tried using ::falg , but it gives out "Active" only for any initial value of flag.

Suggest my error.

@developer033 : because when I am clicking on checkbox, I am toggling value of flag, which I don't want to be reflacted on my button. As, AngularJs 1.3 and later provides this functionality of only one time binding, I am using it. — Siddharth, Jul 12 '16 at 23:12
This feels like an XY question. It is unclear what your desired result is, but you should be asking about your desired result, instead of asking why your implementation isn't working right. Is what you are trying to accomplish something like "change the button name to deactivated then don't allow it to turn back to active?" What *should* happen when you toggle the checkboxes between states? — Claies, Jul 13 '16 at 02:48
@Claies my question is clear, at least i think so : Once value of flag is read in both the tags, I dont want it to be changed (or u can say , i want to unbind it from only tags), so that when toggles the flag value, it should not change . How can I do that? Does that make sense? — Siddharth, Jul 13 '16 at 16:28
what you are describing makes some sense from a functionality perspective, but from a UI Design perspective it seems a bit odd that an element would have an effect the first time it is used but not the second time; at the moment, I can't think of a way to make the UI elements act the way you are requiring without using a custom directive. — Claies, Jul 13 '16 at 18:50

score 0 · Answer 1 · edited May 23 '17 at 11:44

The double colon is using the One-time binding syntax so once it evaluates flag it doesn't watch it anymore. In this instance you'd want to remove the ::.

Also if you have any actions (like click events) on the buttons you're showing or hiding you'll need to re-bind them if you use ngif. If you use ngshow/nghide you won't. Here's a good summary of when to use which: When to favor ng-if vs. ng-show/ng-hide?

Editing to add, if flag is always returning true when it's initially evaluated then you need to look at how you're setting your values initially as once it's set it won't be re-evaluated after the code is parsed because of the one-time binding.

First, if I remove :: then it will change everytime checkbox is clicked. Second, I don't need any action for the button as well. So I think I will have to think of different apporach now to bind it only once. — Siddharth, Jul 12 '16 at 23:45

Need to remove binding for ng-if

1 Answers1