1

Is there a way for me to do a nested ng-repeat call, but not having it create a nested structure.

I.e.

Say I have this in my script:

$scope.animals = {
      dog : {
        rupert: {
          size: 'big'
        }
      },
       cat : {
        jon: {
          size: 'small'
        },
        don: {
          size: 'small'
        }
      },
       pig : {
        mike: {
          size: 'big'
        }
      }
    }

and this in my html

<ul>
   <ul ng-repeat="(type,animal) in animals">
      <li ng-repeat="(name,description) in animal">
        <span>
          This is {{name}} the {{type}}, he is really {{description.size}}.
         </span>
       </li>
    </ul>
</ul>

Here is a plunkr : http://plnkr.co/edit/BtAIejohzzVjrwWDfBWK?p=preview

Basically at the moment this creates something like this:

<ul>
    <ul>
        <li>
            <span>
                This is don the cat, he is really small.
            </span>
        </li>
        <li>
            <span>
                This is jon the cat, he is really small.
            </span>
        </li>
    </ul>
    <ul>
        <li>
            <span>
                This is rupert the dog, he is really big.
            </span>
        </li>
    </ul>
    <ul>
        <li>
            <span>
                This is mike the pig, he is really big.
            </span>
        </li>
    </ul>
</ul>

I'd like it to make something like this:

<ul>
    <li>
        <span>
            This is don the cat, he is really small.
        </span>
    </li>
    <li>
        <span>
            This is jon the cat, he is really small.
        </span>
    </li>
    <li>
        <span>
            This is rupert the dog, he is really big.
        </span>
    </li>
    <li>
        <span>
            This is mike the pig, he is really big.
        </span>
    </li>
</ul>

So is there a way to formulate this to get this result, do something of this sort (this doesn't work lol)

<ul>
    <ng-repeat="(type,animal) in animals">
        <li ng-repeat="(name,description) in animal">
            <span>
                This is {{name}} the {{type}}, he is really {{description.size}}.
            </span>
        </li>
    </ng-repeat>
</ul>

*note I'd like to avoid doing this

<ul>
        <li ng-repeat="(name,description) in animals.dog">
            <span>
                This is {{name}} the dog, he is really {{description.size}}.
            </span>
        </li>
        <li ng-repeat="(name,description) in animals.cat">
            <span>
                This is {{name}} the cat, he is really {{description.size}}.
            </span>
        </li>
        <li ng-repeat="(name,description) in animals.pig">
            <span>
                This is {{name}} the pig, he is really {{description.size}}.
            </span>
        </li>
</ul>

1 Answer 1

3

You could probably create a couple of dummy ng-repeat-start/ng-repeat-end directives for the top level repeater.

 <ul>
    <!-- Remove it with an ng-if -->
    <li ng-repeat-start="(type,animal) in animals" ng-if="0"></li>

    <!-- Or do -->
    <!-- <li ng-repeat-start="(type,animal) in animals" ng-if="::type<0"></li> -->

    <li ng-repeat="(name,description) in animal">
      <span>
        This is {{name}} the {{type}}, he is really {{description.size}}.
      </span>
    </li>

    <!-- Remove it with an ng-if -->
    <li ng-repeat-end  ng-if="0"></li>

    <!-- Or do -->
    <!-- <li ng-repeat-end  ng-if="::type<0"></li> -->
  </ul>

Plnkr

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.