(key,value) in object loop with nested ng-repeat

Question

I have a ng-repeat iteration like this:

<p ng-repeat="(label,field) in app.config.properties">
                <span class="radio-group" > 
                        <div ng-repeat="option in x.options">
                              {{label}}
                        </div>
                    </span>

</p>

I am unable to access the label inside nested loop. I also tried using $parent.label but doesn't seem to work.

If `x.options` is empty, you won't see `label`, please check if it has any elements. — no1lov3sme, May 22 '17 at 08:35
doesn't work! In case that helps, this is a custom directive — beNerd, May 22 '17 at 08:42
we would keep guessing problem and never reach solution.. or you could provide a verifiable example (code snippet or plunker) to get it solved — tanmay, May 22 '17 at 08:44
Can you show how your objects look like? `config.properties` and `x` ? — bamtheboozle, May 22 '17 at 08:44
tag cannot be inside
tag...Change either
or
to make it work. — Karan Desai, May 22 '17 at 08:49
http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it — anoop, May 22 '17 at 08:56

Pengyy · Answer 1 · 2017-05-22T08:54:15.797

It seems to be an issue about <p> and ng-repeat(<p> doesn't show), when I changed <p> to <div>, it's working well.

UPD:

You can move inside ng-repeat to <span> and remove the <div> in it, this way will work with <p>, this is also commented by @ Karan Desai.

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.app = {
      config: {
        properties: [
          {id:1},
          {id:2},
          {id:3},
          {id:4}
        ]
      }
    };
    $scope.x = {
      options: [
        {
          id: 1
        },
        {
          id: 2
        }
      ]
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <p ng-repeat="(label,field) in app.config.properties">
    <span class="radio-group" ng-repeat="option in x.options">
      {{label}}
    </span>
  </p>
</div>

(key,value) in object loop with nested ng-repeat

1 Answers1