How can we use ng-repeat without adding any additional html element?


#1

I would like to loop though each item and display the values of each item. My problem is that while looping though each item using ng-repeat, I don’t want to add that additional div which has added to use the ng-repeat. Is there any way to use the ng-repeat without adding any div.

"items": [{companyName: 'xyz', tenantId: 1234, branchId, 2345}, {companyName: 'sarath', tenantId: 7364985, branchId, 23457845}]
        <div class="list">
          <div class="row item" ng-repeat="item in items" data-ng-click="onClickItem(item)">
             <!-- Don't want to add this additional div-->
            <div ng-repeat = "(key, value) in item">
              <div ng-if='$index == 0' class="col col-75">{{value}}</div>
              <div ng-if='$index == 1' class="col">{{value}}</div>
            <div>
          </div>            
        </div>      

#2

It should be possible when you write a custom directive that uses the link method to manipulate the data… You could end up with something like:

<div class="row item" ng-nested-repeat="(key,value) in items" data-ng-click="onClickItem(item)">

But in pure angular, you are iterating over a list withing a list, so you have to iterate each nesting yourself. I wouldn’t touch it :wink: I think keeping it like this produces cleaner and self-explanatory code.


#3

Thanks for your quick response iwantwin. Can you please explain in brief how can we use the ng-nested-repeat custom attribute to loop through the list of items. Please give me some pseudocode because I am new to angularjs.


#4

I’m sorry if I wasn’t clear about that! The ng-nested-repeat would be custom, so you would have to write your own directive to support this. The attribute does not come packaged nor do I know a directive that already implements your wish… I’m not really experienced in angular myself though, so wraping up a directive will take me some time, which I can’t spend right now. I will try to create such a directive this weekend (there must be a time where I have to learn writing a directive anyways), so please bear with the extra div for now and remind me next week (or I won’t be able to find the topic anymore… Probably :P) to share my first custom directive :smiley: ( If I manage to pull it off that is…)


#5

You can use “ng-repeat-start”:

<div ng-repeat-start = "(key, value) in item" ng-if='$index == 0' class="col col-75">{{value}}</div>
<div ng-repeat-end ng-if='$index == 1' class="col">{{value}}</div>

and remove the wrapper div