Use a condition in ng-repeat

16,499

Solution 1

We can't attribute a function to templateUrl in the current stable version (1.0.8), so here is what I did.

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>

For some reason, I did not manage to nest directives, so I used ng-include instead. (Edit: Problem solved here)

Solution 2

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

Solution 3

Depending on what you want, you can use ngClass for this.

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

In this example, the object's type would apply a class. See http://docs.angularjs.org/api/ng.directive:ngClass for more information.

If this is to parse the data or something similar, you can try to use one directive, and handle the case inside.

Edit:

To expand on the later, you can put your logic in a service and call the appropriate functions in a parent directive. http://docs.angularjs.org/guide/dev_guide.services.creating_services

Solution 4

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

In angular 1.2 you can use the ng-switch directive as well which is more efficient.

I guess I should add that the test might look more like this

ng-if="obj instanceof type1"

depending on what you mean by type.

Based on further comments I believe that this is also a possible answer to your question:

Angular Directive Different Template

Still, ng-if or ng-switch is a much easier way since it doesn't require any special knowledge of the ng-repeat object type.

View more solutions

16,499

Author by

JMaylin

Updated on June 04, 2022

Comments

JMaylin about 2 years
I have a simple ng-repeat
```
<div ng-repeat="obj in someArray"></div>
```
I would like to use the custom directive "type1" if obj.type == "type1" and use the custom directive "type2" if obj.type == "type2". Is there a smart way to do that?

Edit

I will use this solution at different locations, so I would like to put the logic in the directive and not in the html. I was thinking that maybe I could use a "parent" directive that "includes" one directive or the other depending on obj.type. What do you think?
- 0xcaff almost 11 years
  
  stackoverflow.com/questions/12666307/angularjs-if-statements
- 0xcaff almost 11 years
  
  stackoverflow.com/questions/14164371/…
- JMaylin almost 11 years
  
  I've edited my question for more precisions.
JMaylin almost 11 years

I suppose you could do that, but I was looking for a solution that doesn't add too many div/span
JMaylin almost 11 years

I was looking for a solution that doesn't require too much logic html-side. Sorry I should have been more precise
Nathaniel Johnson almost 11 years

Where do you want to specify the logic for inclusion?
Nathaniel Johnson almost 11 years

The directive itself might be the best place. By specifying a different template inside of the directive depending on the obj.type might be a good approach.
JMaylin almost 11 years

That's what I was thinking, but is it possible to have two "template" or "templateUrl"
Nathaniel Johnson almost 11 years

Yes, If you test for the type in the link function you can specify whatever you want as the template. Maybe show a pretend piece of what you think the HTML markup should look like.
JMaylin almost 11 years

I'm not at work right now, I will try your solution and/or give more precisions tomorrow. Thanks for your help
Nathaniel Johnson almost 11 years

It can be done but it is moving beyond my knowledge of angular. Don't mark an answer as correct and maybe someone will see it and tell you how.
Alexander Mistakidis almost 11 years

I've edited my answer with more markup. I've also expanded on how to do the parent directive if you wanted to take that path.
JMaylin almost 11 years

I've answered my question if you are interested
JMaylin almost 11 years

I've answered my question if you are interested
JMaylin almost 11 years

I've answered my question if you are interested