CODEWITHSUNDEEP
javascriptangularjs
Ismail
Ismail

Reputation: 9592

Angularjs - grouping ng show

How can I group ng-shows without ruining the dom tree order?

Reason: I want to decrease the amount of watchers

For example I have these ng-shows:

<ul>
    <li>A</li>
    <li>B</li>
    <li ng-show="canEdit">C</li>
    <li ng-show="canEdit">D</li>
    <li ng-show="canEdit">E</li>
</ul>

Can I somehow do something like this:

<ul>
    <li>A</li>
    <li>B</li>
    {{ng-show-start(canEdit)}}
    <li>C</li>
    <li>D</li>
    <li>E</li>
    {{ng-show-end(canEdit)}}
</ul>

Using an DOM element instead of ng-show-start&end can also be an solution, but it must be able to remove its element and show the contents on true.

Upvotes: 1

Views: 671

Answers (2)

Dominik G
Dominik G

Reputation: 1479

I know this question is three years old and probably irrelevant but there's the following solution in angular 1.2+

<ul>
    <li>A</li>
    <li>B</li>
    <li ng-show-start="canEdit">C</li>
    <li>D</li>
    <li ng-show-end="canEdit">E</li>
</ul>

The -start and -end postfixes can be used with ng-show, ng-if, ng-switch, ng-repeat and your own directives if multiElement: true is set.

Upvotes: 1

ken4z
ken4z

Reputation: 1390

If canEdit is not going to change after the initial assignment then you can use a one time bind introduced in angular 1.3. ng-show="::canEdit". https://docs.angularjs.org/guide/expression

If you really want to group the <li> tags then you will need to wrap them in an html element and put the ng-show on it

I don't think you need to worry about too many watchers though. I believe (though am not certain) that angular will only assign a single watcher to canEdit as it is a single variable that is being bound in multiple locations

Upvotes: 0

Related Questions