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, Jul 17 '14 at 09:58
He means dynamic because fields have different names in the two lists. ( `title` versus `titleBig` for instance) — Pak, Jul 17 '14 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, Jul 17 '14 at 10:13
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 for every field and I am trying to make a generic modal to every input field — John, Jul 17 '14 at 10:36

Pak · Answer 1 · 2014-07-17T10:11:52.450

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 '14 at 10:11

answered Jul 17 '14 at 10:06

Pak

2,123
22
28

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 – John Jul 17 '14 at 10:56

score 0 · Answer 2 · edited May 23 '17 at 11:50

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>

Angularjs - Dynamic ng-repeat Expression

2 Answers2