Replace attribute using angular

Question

I am new to angular.

My question is, Is it possible to replace 'ng-hide' with 'ng-show' if 'ng-if' is satisfied?

I want to hide and show certain div based on the data I receive. Its either 'true' or 'false', if 'false' the div should be hidden, else it should show.

what's the problem with ng-if/ng-show itself..?? your question seems unclear — Pankaj Parkar
– Pankaj Parkar, Commented Feb 13, 2017 at 19:13
... you shouldn't need to. use ng-show or ng-hide if you want the element to always exist but show or hide based on a value, else use ng-if if you want the element to exist or not exist based on a value. — user400654
– user400654, Commented Feb 13, 2017 at 19:13
That is where my problem is. I have 2 sets of data. Initially i want to hide both of them, and later after a validation, i get to show either one of the 2 data in a div. — Atul Kumar
– Atul Kumar, Commented Feb 13, 2017 at 19:17
Could you provide JSFiddle or Plunker? It's not easy to figure out what you need to achieve. — Radek Anuszewski
– Radek Anuszewski, Commented Feb 13, 2017 at 19:18
you only need one of the three directives, and a conditional that has the logic you seek. It could be as simple as ng-if="foobar" where foobar is a property on your scope that you change based on the logic you need. — user400654
– user400654, Commented Feb 13, 2017 at 19:39

georgeawg · Accepted Answer · 2017-02-13 19:53:55Z

1

It can be done with boolean logic:

<div ng-show="cond1 && cond2">
    One data set
</div>
<div ng-show="cond1 && !cond2">
    Other data set
</div>

Both data sets will be hidden if cond1 == false. If true, one or the other will show.

Or use De Morgan's Theorem:

<div ng-show="cond1 && cond2">
    One data set
</div>
<div ng-hide="!cond1 || cond2">
    Other data set
</div>

edited Feb 13, 2017 at 19:53

answered Feb 13, 2017 at 19:43

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atul Kumar Over a year ago

This solution was very helpful. Thank you!

Radek Anuszewski · Accepted Answer · 2017-02-13 19:28:40Z

It is unclear for me what you need to achieve, but maybe it will be useful:

function Controller (SomeService) {
    var vm = this;
    vm.firstVisible = false;
    vm.secondVisible = false;
    SomeService.getData().then(data) {
        // firstValidation() function returns true if first way of display is matching
        if (firstValidation(data)) {
            vm.firstVisible = true;
        }

        // secondValidation() function returns true if second way of display is matching
        if (secondValidation(data)) {
            vm.secondVisible = true;
        }
    }
}

And then in HTML:

<div>
    <div ng-if="vm.firstVisible">
        First way of displaying data
    </div>
    <div ng-if="vm.secondVisible">
        Second way of displaying data
    </div>
</div>

(Intentionally I don't use $onInit or other stuff to do not make things complicated)

Collectives™ on Stack Overflow

Replace attribute using angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related