Question

我有一个简单的ng-repeat

<div ng-repeat="obj in someArray"></div>

如果obj.type == "type1"，我想使用自定义指令“type1”，如果obj.type == "type2"，则使用自定义指令“type2”。有没有聪明的方法呢？

修改

我将在不同的位置使用此解决方案，因此我想将逻辑放在指令中而不是在html中。我想也许我可以使用“包含”一个指令或另一个指令的“父”指令，具体取决于obj.type。你觉得怎么样？

Answer 1

使用ng-switch：

   <div ng-repeat="obj in someArray">
     <span ng-switch="obj.type">
      <div directive-one ng-switch-when="type1"></div>
      <div directive-two ng-switch-when="type2"></div>
     </span>
    </div>

Answer 2

根据您的需要，您可以使用ngClass。

<div ng-repeat="obj in someArray">
  <div ng-class"{class1: obj.type == "type1", class2: obj.type == "type2"}"></div>
</div>

在此示例中，对象的类型将应用类。有关详细信息，请参阅http://docs.angularjs.org/api/ng.directive:ngClass。

如果这是要解析数据或类似的东西，你可以尝试使用一个指令，并处理内部的情况。

编辑：

要扩展后者，可以将逻辑放在服务中并在父指令中调用相应的函数。 http://docs.angularjs.org/guide/dev_guide.services.creating_services

Answer 3

<div ng-repeat="obj in someArray">
    <type1 ng-if="obj.type=='type1'"></type1>
    <type2 ng-if="obj.type=='type2'"></type2>
</div>

在角度1.2中，您也可以使用ng-switch指令，效率更高。

我想我应该补充一点，测试看起来可能更像这个

ng-if="obj instanceof type1"

取决于您所说的类型。

根据进一步的评论，我相信这也是您问题的可能答案：

Angular Directive Different Template

仍然，ng-if或ng-switch是一种更容易的方法，因为它不需要任何关于ng-repeat对象类型的特殊知识。

Answer 4

我们无法将函数归因于当前稳定版本（1.0.8）中的templateUrl，所以这就是我所做的。

HTML

<div ng-controller="MainCtrl">
    <div class="genericDirective" ng-repeat="obj in someArray"></div>
</div>

的Javascript

var app = angular.module("myApp", []);

app.controller("MainCtrl", function ($scope) {
    $scope.someArray = [
        {type:"type1",title:"lorem"},
        {type:"type2",title:"ipsum"},
        {type:"type2",title:"dolor"}
    ];
});

app.directive("genericDirective", function(){
    return{
        restrict: "C",
        templateUrl: "genericDirective.html" 
    };
});

genericDirective.html

<div ng-include="thumb.type+'Thumb.html'"></div>

出于某种原因，我没有设法嵌套指令，所以我使用ng-include代替。（修改：问题已解决here）

在ng-repeat中使用条件

修改

4 个答案:

HTML

的Javascript

genericDirective.html