Angularjs Angular JS:ng在没有嵌套结构的情况下重复多次

Angularjs Angular JS:ng在没有嵌套结构的情况下重复多次,angularjs,angularjs-directive,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Ng Repeat,有没有一种方法可以让我执行嵌套的ng repeat调用,但不让它创建嵌套结构 即 假设我的脚本中有以下内容: $scope.animals = { dog : { rupert: { size: 'big' } }, cat : { jon: { size: 'small' }, don: { size: 'small'

有没有一种方法可以让我执行嵌套的ng repeat调用,但不让它创建嵌套结构

假设我的脚本中有以下内容:

$scope.animals = {
      dog : {
        rupert: {
          size: 'big'
        }
      },
       cat : {
        jon: {
          size: 'small'
        },
        don: {
          size: 'small'
        }
      },
       pig : {
        mike: {
          size: 'big'
        }
      }
    }
这在我的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>
    • 这是{{name}}{{type}},他真的是{{description.size}。
下面是一个例子:

基本上目前这创造了这样的东西:

<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>
<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>
    • 这是猫唐,他真的很小。
    • 这是猫乔恩,他真的很小。
    • 这是狗鲁伯特,他真的很大。
    • 这是猪迈克,他真的很大。
我希望它能做成这样的东西:

<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>
<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>
  • 这是猫唐,他真的很小。
  • 这是猫乔恩,他真的很小。
  • 这是狗鲁伯特,他真的很大。
  • 这是猪迈克,他真的很大。
那么有没有一种方法来表达这个结果,做一些类似的事情(这不管用lol)

  • 这是{{name}}{{type}},他真的是{{description.size}。
*注意我希望避免这样做

<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>
  • 这是{{name}那条狗,它真的是{{{description.size}。
  • 这是{{name}猫,他真的是{{{description.size}。
  • 这是{{name}猪,他真的是{{{description.size}。

您可能可以为顶级中继器创建两个伪指令

 <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>
  • 这是{{name}}{{type}},他真的是{{description.size}。