AngularJS – using ng-show within ng-repeat

All we need is an easy explanation of the problem, so here it is.

I’m having an issue using the ng-show directive within an ng-repeat block.

The boolean value does not seem to be getting passed to ng-show correctly…

To show what I mean, here is a screenshot of an example I made in JSFiddle:

enter image description here

Here is some example markup:

<table ng-controller="ActressController" class="table table-bordered table-striped">
    <tr ng-repeat="actress in actressList">
        <td>
            <span class="actress-name">{{ actress.name }}</span>
            <h4 ng-show="{ actress.name == 'Scarlett' }">Was in Avengers! <span class="note">(should only appear if Scarlett)</span></h4>
            <h2>{{ actress.name == 'Scarlett'}} <span class="note"><-- this statement is correct</span></h2>

        </td>

    </tr>
</table>

Here is an example controller:

function ActressController($scope) {
    $scope.actressList = [
        {
            name: "Angelina"
        }, {
            name: "Scarlett"
        }, {
            name: 'Mila'
        }, {
            name: 'Megan'
        }
    ]        

}

Any ideas on what I may be doing wrong?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

In your ng-show you don’t need { } try this:

<h4 ng-show="actress.name == 'Scarlett'">Was in Avengers! <span class="note">

See this fiddle for a working sample of an ng-show within an ng-repeat.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply