Use a condition in ng-repeat

Question

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?

http://stackoverflow.com/questions/12666307/angularjs-if-statements — 0xcaff, Sep 30 '13 at 15:51
http://stackoverflow.com/questions/14164371/inline-conditionals-in-angular-js/14165488#14165488 — 0xcaff, Sep 30 '13 at 15:52

score 6 · Answer 1 · answered Sep 30 '13 at 15:55

6

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>

answered Sep 30 '13 at 15:55

Eugenio Cuevas

10,858
3
29
51

I suppose you could do that, but I was looking for a solution that doesn't add too many div/span – JMaylin Sep 30 '13 at 16:59
I've answered my question if you are interested – JMaylin Oct 02 '13 at 07:58

Alexander Mistakidis · Answer 2 · 2013-10-01T03:49:10.987

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

edited Oct 01 '13 at 03:49

answered Sep 30 '13 at 15:55

Alexander Mistakidis

3,130
2
20
23

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. – Alexander Mistakidis Oct 01 '13 at 03:50
I've answered my question if you are interested – JMaylin Oct 02 '13 at 07:56

score 2 · Answer 3 · edited May 23 '17 at 12:30

2

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

edited May 23 '17 at 12:30

Community

1
1

answered Sep 30 '13 at 15:55

Nathaniel Johnson

4,731
1
42
69

I was looking for a solution that doesn't require too much logic html-side. Sorry I should have been more precise – JMaylin Sep 30 '13 at 17:02
Where do you want to specify the logic for inclusion? – Nathaniel Johnson Sep 30 '13 at 17:08
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. – Nathaniel Johnson Sep 30 '13 at 17:10
That's what I was thinking, but is it possible to have two "template" or "templateUrl" – JMaylin Sep 30 '13 at 17:12
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. – Nathaniel Johnson Sep 30 '13 at 17:16
I'm not at work right now, I will try your solution and/or give more precisions tomorrow. Thanks for your help – JMaylin Sep 30 '13 at 17:23
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. – Nathaniel Johnson Sep 30 '13 at 17:24
I've answered my question if you are interested – JMaylin Oct 02 '13 at 07:59

score 0 · Accepted Answer · edited May 23 '17 at 11:59

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)

Use a condition in ng-repeat

Edit

4 Answers4

HTML

Javascript

genericDirective.html