Angularjs - Dynamic ng-repeat Expression

Question

I want to make a dynamic page, that depending of some aspects shows one list or another list, both arrays have different variable names. I tried to use somethings to put dynamic ng-repeat expression but without success.

Anyone has some suggestion? I made a fiddle to explain what i need.

<div ng-repeat="item in itemsToShow" >
    <!--THIS IS THE EXPRESSION THAT I WANT DYNAMIC-->
 {{item.name}}, {{item.title}}

[fiddle] http://jsfiddle.net/eTTZj/867/

I'm struggling to understand what you want to do. What's wrong with the fiddle? — Alex
– Alex, Commented Jul 17, 2014 at 9:58
He means dynamic because fields have different names in the two lists. ( title versus titleBig for instance) — Pak
– Pak, Commented Jul 17, 2014 at 10:04
I understand now. There's no concrete answer for this situation, I would advise you to either organise your data homogenously, or if they are semantically different, create a template for each and use an ng-switch to determine which template to use — Alex
– Alex, Commented Jul 17, 2014 at 10:13

Community · Accepted Answer · 2017-05-23 11:50:19Z

0

I've updated your JSFiddle. When you want to be 'dynamic', just code the logic inside the controller and set the $scope.itemsToShowwith different arrays, so your view hasn't to change.

Like this:

....
var show_items_2 = true;
/*Whatever you want to do here*/
if(show_items_2) {
   $scope.itemsToShow = items2;
} else {
    $scope.itemsToShow = items;
}

When you want to have different keys inside your array ('name' and 'nameBig'), you have to access the items differently (through (key, value)). See this SO question here.

<div ng-repeat="item in itemsToShow"></div>
<div ng-repeat="(key, value) in item">
    {{key}} : {{value}}
</div>

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Jul 17, 2014 at 10:07

ohboy21

4,3299 gold badges42 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pak · Accepted Answer · 2014-07-17 10:11:52Z

0

You could use operators :

    <div ng-repeat="item in itemsToShow" >
     {{item.name || item.firstname}},  {{item.title || item.titleBig}}
   </div>

This will pick the existing property in your list.

If it's unsunstainable for many, many lists you can also do this:

<div ng-repeat="item in itemsToShow"></div>
    <div ng-repeat="(key, value) in item">
        {{key}} : {{value}}
    </div>
</div>

edited Jul 17, 2014 at 10:11

answered Jul 17, 2014 at 10:06

Pak

2,24324 silver badges28 bronze badges

1 Comment

John Over a year ago

Let me explain in a better way. I have and app with 30 input fields. In each field i want a modal with the list of every possible values for that field. but that information comes from a different array with different keys (email,name,phone) for every field and I am trying to make a generic modal to every input field

Collectives™ on Stack Overflow

Angularjs - Dynamic ng-repeat Expression

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related