5

I am new to angularjs. Not being able to find a way to include a couple of li items together inside an ng-if. Knockout had virtual elements doing the jobs, like this

<ul>
    <li>This item always appears</li>
    <!-- ko if: someExpressionGoesHere -->
        <li>I want to make this item present/absent dynamically</li>
        <li>I want to make this item present/absent dynamically</li>
    <!-- /ko -->
</ul>

Would appreciate help.

update: Enclosing inside a container like <div> or <span> is distorting the view when used inside the nav in bootstrap:

<div ng-if="!auth.user">
   <li>
    <a href="#!/signup">Sign up <span class="glyphicon glyphicon-list-alt"></span></a>
    </li>
    <li>
    <a href="#!/login">Sign in <span class="glyphicon glyphicon-log-in"></span></a>
    </li>
</div>

Sanjay

Sanjay
  • 8,755
  • 7
  • 46
  • 62

2 Answers2

1

It's basically something like:

<li ng-if="conditionExpression">I want to make this item present/absent dynamically</li>

or, if you want to avoid scoping:

<li ng-show="conditionExpression">I want to make this item present/absent dynamically</li>

update If you want to group several items inside one ng-if, you need to put them in a container, or just add a ng-if to each of them separately. See example

Yaron Schwimmer
  • 5,327
  • 5
  • 36
  • 59
  • Thanks, but sorry - my question wasn't clear; have edited it now. I meant to know if there is a way to use ng-if to surround a few
  • items together, like knockout has *virtual elements*.
    • – Sanjay Nov 17 '14 at 14:45
  • Great, thanks. So, we can have a container like a div in the middle of a running list. Probably an HTML5 feature I wasn't aware of. – Sanjay Nov 18 '14 at 08:31
  • Doesn't work with bootstrap nav. Have updated my question with code sample. – Sanjay Nov 19 '14 at 14:28