Question

如下所示，我使用ng-repeat来迭代一系列产品，最后使用这样的自定义指令

<div ng="$last" some-product-directive datajson=product></div>

问题在于我希望能够根据products中ng-repeat正在迭代的条件，从几个不同的指令中进行选择。想象一下，例如，我可能希望将此指令用于一种类型的产品

some-product-directive datajson=product

和其他类型产品的指令

some-other-product-directive datajson=product

如何在ng-repeat

结尾处的$last中插入条件逻辑

<div ng-repeat="product in products">   
<div class="row">
<div class="col-md-1"><h2>{{ product.name }}</h2><input></input>{{product.date}}</div>

<div class="col-md-2"></div>
<div id="d{{::$id}}"></div>
</div>

<div ng="$last" some-product-directive datajson=product></div>
</div>
</div>

更新我的指令使用了一个isolate-scope，它需要访问指令elem[0].previousElementSibling的{{1}}函数中的link。如果我使用link: function (scope, elem, attrs)作为条件逻辑（如下面的答案所示）（创建子范围），则ng-if为elem[0].previousElementSibling且指令不再有效。有解决方法吗？

Answer 1

使用精彩的ng-if：

<div ng-repeat="product in products">   
<div class="row">
<div class="col-md-1"><h2>{{ product.name }}</h2><input></input>{{product.date}}</div>

<div class="col-md-2"></div>
<div id="d{{::$id}}"></div>
</div>

<div ng-if="!$last" some-other-product-directive datajson="product"></div>
<div ng-if="$last" some-product-directive datajson="product"></div>
</div>
</div>

您显然可以使逻辑复杂化，并从ng-if引用控制器中的函数。

Answer 2

这里有两个问题，似乎是：

如何仅针对ng-repeat
如何动态选择要呈现的HTML，具体取决于product的属性，并且仅适用于上次迭代。

这两个问题都可以通过使用ng-if，ng-switch和ng-show / ng-hide等条件呈现指令来解决。前者触发HTML是否会插入到DOM中;后者仅触发CSS规则显示/隐藏。

所有这些指令都期望表达并评估其真实性。

所以，你可以这样做：

 <div ng-repeat="product in products">
    {{product.name}}
    <div ng-if="$last">

       <div ng-if="product.type === 'some'" 
            some-product-directive datajson="product"></div>

       <div ng-if="product.type === 'some other'" 
            some-other-product-directive datajson="product"></div>

    </div>
 </div>

如何在ng =＆＃34; $ last＆＃34;中插入自定义逻辑

2 个答案: