ng-show not working on nested ng-repeat

Question

I have this JSON structure like this:

{
  "products": {
    "318": {
      "id": 318,
      "product_id": 32,
      "sold_by": 1,
      "sold_from_date": 1452075077,
      "sold_to_date": 1459937477,
      "product_price": "1,200",
      "renewed_for": 0,
      "renewed": {
        "319": {
          "id": 319,
          "product_id": 32,
          "sold_by": 1,
          "sold_from_date": 1452075077,
          "sold_to_date": 1459937477,
          "product_price": "1,200",
          "renewed_for": 318
        }
      }
    }
  }
}

To print the data, I have to loop through two ng-repeat

the first is the outer loop to print the details of 318. Next is 319, which is parent of 318. Parent is decided through renewed_for index.

In the first block of ng-repeat, I have some options like edit and delete. On clicking these, a pop-up opens. In the second (inner) block of ng-repeat, options are same for edit and delete.

<div ng-repeat=data in products>
    <div class=edit ng-click="showEdit = true">
    </div>
    <div ng-repeat=renew in data>
        <div class=edit ng-click="showEdit = true">
        </div>
    </div>
    <div class="modal" ng-show="showEdit">
        <div class="product_price">{{data.product_price}}</div>
    </div>
</div>

The showEdit popup works only for outer loop, and not for the inner (renew) loop.

EDIT: Now, when I open the pop-up from the inner loop(renew), the value that I get in it is the value of outer loop (data). How to solve this??

Post your controller and how you open the popup. or create a jsfiddle. — Zaki, Jan 12 '16 at 16:39
Is the inner loop running ... I mean can u see the divs of inner loop ?? — Satyam S, Jan 12 '16 at 16:40

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

ng-repeat creates a new scope. you will have to do

$parent.showEdit = true

in the inner ng-repeat instead.

but the even better approach would be not to use "undotted" variables in the first place. look here:

Why don't the AngularJS docs use a dot in the model directive?

here's a working example:

<div ng-repeat=data in products>
    <div class=edit ng-click="showEdit = true; content = data;">
    </div>
    <div ng-repeat=renew in data>
        <div class=edit ng-click="$parent.showEdit = true; $parent.content = renew;">
        </div>
    </div>
    <div class="modal" ng-show="$parent.showEdit">
        <div class="product_price">{{content.product_price}}</div>
    </div>
</div>

edited May 23 '17 at 12:04

Community

1
1

answered Jan 12 '16 at 16:41

Patrick Kelleter

2,631
1
13
19

Much better to use an object in the model instead of primitive and avoid using `$parent`. The nested `ng-repeat` would require `$parent.$parent` which gets ugly in a hurry with structural changes – charlietfl Jan 12 '16 at 16:42
yeah thats why i said the shouldn't use "undotted" variables and linked the other topic :) – Patrick Kelleter Jan 12 '16 at 16:47
i already answered your question. also your edited question. this has the exact same reason. ng-repeat creates a new scope which is why your code behaves like it behaves. you should read the link i posted and fix the code accordingly (use dotted variables like "myobject.showEdit" instead of "showEdit") – Patrick Kelleter Jan 12 '16 at 17:01
But in my modal I am using `data` to show items. And in my second loop, it is replaced by `renewed`. So, how will it take the `renewed` object into consideration? – nirvair Jan 12 '16 at 17:03
Isn't the problem with ng-repeat? – nirvair Jan 12 '16 at 17:06
your "showEdit" in your second loop is a different "showEdit" than in your outer loop. because ng-repeat creates a new scope as mentioned. you have to google for "ng-repeat" and "new scope" for deeper understanding. or read the article i posted. i don't understand what your question is to be honest. see my edited post for an example what i mean – Patrick Kelleter Jan 12 '16 at 17:07
The problem here is the data I want to show in popup has to be different. That is when I click on the outer loop's edit, it should show me data for `318` (the parent). And if I click on outer loop's edit, popup should show me the data for `319` (child - inner loop) – nirvair Jan 12 '16 at 17:13
then you will have to use a different variable name for the inner loop showEdit, e.g. showEdit2 but still you will have to put it into an object or use $parent (not recommended) – Patrick Kelleter Jan 12 '16 at 17:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100503/discussion-between-phantomphoenix-and-patrick-kelleter). – nirvair Jan 12 '16 at 17:16

score 0 · Answer 2 · answered Jan 12 '16 at 16:47

You have to set an object containing a boolean showEdit property instead of a boolean on your $scope inside your controller like this:

function MyCtrl($scope) {
    $scope.dataUI = {
        showEdit: true
    };
}

<div ng-repeat=data in products>
    <div class=edit ng-click="dataUI.showEdit = true">
    </div>
    <div ng-repeat=renew in data>
        <div class=edit ng-click="dataUI.showEdit = true">
        </div>
    </div>
    <div class="modal" ng-show="dataUI.showEdit">
    //Code for edit modal
    </div>
</div>

Lots of posts explains why: http://zcourts.com/2013/05/31/angularjs-if-you-dont-have-a-dot-youre-doing-it-wrong/

ng-show not working on nested ng-repeat

2 Answers2