1

我有一个简单的 ng-repeat

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

我想使用自定义指令“type1” ifobj.type == "type1"并使用自定义指令“type2” if obj.type == "type2"。有没有聪明的方法来做到这一点？

编辑

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

4

4 回答 4

6

使用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>
于 2013-09-30T15:55:15.547 回答
3

根据您的需要，您可以为此使用 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

于 2013-09-30T15:55:04.273 回答
2 
<div ng-repeat="obj in someArray">
    <type1 ng-if="obj.type=='type1'"></type1>
    <type2 ng-if="obj.type=='type2'"></type2>
</div>

在 Angular 1.2 中，您也可以使用更有效的 ng-switch 指令。

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

ng-if="obj instanceof type1"

取决于你所说的类型。

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

Angular 指令不同的模板

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

于 2013-09-30T15:55:22.897 回答
0

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

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改用了。（编辑：问题在这里解决）

于 2013-10-02T07:55:06.077 回答