Question

我有没有办法进行嵌套的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>

这是一个傻瓜：http://plnkr.co/edit/BtAIejohzzVjrwWDfBWK?p=preview

目前基本上会产生这样的结果：

<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>
    <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>

*请注意我要避免这样做

<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>

Answer 1

您可以为顶级转发器创建一些虚拟ng-repeat-start/ng-repeat-end指令。

 <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

Angular-JS：ng-repeat多次重复，没有嵌套结构

1 个答案: