Question

我有一个像这样的复杂菜单

<ul>
    <li>
        <p>Lorem ipsum....</p>
        <h3>hello</h3>
    <li>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>

如何将ng-repeat应用于此列表？像

这样的东西

<ul>
    <li ng-repeat="item in menu" ... [if item.title=="home"]>
        <p>Lorem ipsum....</p>
        <h3>hello</h3>
    </li>
    <li [elese for all other titles]>
        <a href="#">item.val</a>
    </li>
</ul>

Answer 1

ng-switch是你的朋友。

我会为每个DOM结构创建一个指令，并使用ng-switch来调用相关的结构。有点像：

<li ng-repeat="item in menu" ng-switch on="item.title">
      <div homeDirective ng-switch-when="home">Settings Div</div>
</li>

Answer 2

你可以这样做;

   <ul>
        <li ng-repeat="item in menu" ng-switch on="item.title">
          <p ng-switch-when="home">
            <p>Lorem ipsum....</p>
            <h3>hello</h3>
          </p>
        </li>
        <li ng-switch-default>
            <a href="#">{{item.val}}</a>
        </li>
    </ul>

Answer 3

我会使用ng-if指令。请参阅DOC HERE

<ul>
    <li ng-repeat="item in menu">           
     <div ng-if="item.title=='home'">
       <p>Lorem ipsum....</p>
        <h3>hello</h3>
     </div>
    </li>
    <li ng-if="item.title!='home'">
        <a href="#">item.val</a>
    </li>
</ul>

供参考：

ngIf是基于单一条件的ngSwitch版本

的 Demo that demonstrates ng-switch, ng-if

基于ng-repeat中不同值的完全不同的dom结构

3 个答案: