Possible to have Angular ng-if with multiple conditions, some bound once, some two-way?

1k views Asked by At

My question is not whether or not you can use multiple conditions in ng-if, but rather whether or not it's possible to have ng-if with only some conditions bound once, while others watch for updates?

As a simple example, if I want to bind the name once, but have a toggle state property that I want to watch for updates: <span ng-if="::page.name === 'something' && page.viewEnabled">Correct page, and the view is enabled!</span>

I would expect that a toggle to page.viewEnabled assuming it's a boolean, would cause the span to disappear. That does not appear to be the case (using Angular 1.3.11).

Does the one-time binding on ::page.name setup the entire expression as being bound once?

Thanks in advance!

EDIT: What I'm curious about is if you have multiple conditions in the same ng-if, one being bound once, while another is not. What I'm seeing is that if you have one that is bound once, the other changing will not affect the ng-if statement.

1

There are 1 answers

1
lux On

I just tested this out, and can confirm that you can in fact bind-once to an ngIf statement. Consider the following example:

https://plnkr.co/edit/m32BBBYlNffxTfggb33g?p=preview

Say your UI is programmatically updating an array of fruits, and let's say we have two ngIf expressions: one uses bind-once, the other is bound normally (i.e twice):

<div ng-if="::fruits.length > 3">More than three fruits!</div>
<div ng-if="fruits.length > 3">More than three fruits!</div>

If we begin adding to this array, we'll note that only the second ngIf expression is triggered when the condition is met:

enter image description here

UPDATE

So it looks as though the original question was more geared toward putting two (2) expressions in an ngIf, but where one expression utilizes bind-once. And interestingly enough, neither of the statements fire (see below), which is a bit surprising, which would seem to indicate you cannot combine one and two-way bound expressions. In the first ngIf, I would have expected the very first condition to have been evaluated truthfully, then short-circuit since it doesn't need to evaluate the second expression, which happens to be bound once. But that doesn't seem to be the case.

Plunkr has been updated.

  <div ng-if="fruits.length > 3 || ::fruits.length > 3">1.) More than three fruits!</div>
  <div ng-if="::fruits.length > 3 || fruits.length > 3">2.) More than three fruits!</div>