Menu
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:
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?
652
Absolutely not. First of all, the two directives can trip over each other( see this JSFiddle, as provided by Joel Skrepnek), and is generally just bad design. You can use a function, another field or just some more inline-logic.
Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope. So what you need to do is reach up to the parent scope, and use that $index .
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
You can nest two ng-repeat together in order to create a more complex table. The first ng-repeat in the tr tag will create the rows and the second one in the td tag will create one column per element in the collection.
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.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
