Iterate in Angular expression

Question

I got this HTML:

<tr data-ng-repeat="report in reportSummary">
    <td class="reports-list-table-column-device-category" 
        data-ng-if="report.deviceCategory.length !== 1">
        <button popover="{{report.deviceCategory[0].name}}" 
        popover-title="Multi-category" type="button" class="btn btn-default">
             Multi-category
          </button>
   </td>
</tr>

and I want to iterate through report.deviceCategory[] in popover. How can I make it in HTML?

Anybody giving minus, justify it.

one more ng-repeat? ng-repeat="items in report.deviceCategory" — Stepan Suvorov
– Stepan Suvorov, Commented Sep 11, 2015 at 12:11
I want to iterate in my popover. Can you point a bit more clearly your idea? — Treck
– Treck, Commented Sep 11, 2015 at 12:14

m.e.conroy · Accepted Answer · 2021-03-11 15:23:00Z

1

You can try using a custom filter. <button popover="report.deviceCategory | customFilter">

Your filter would receive the the deviceCategory array, inside the filter just put your string together and return it. This way you avoid the 2nd ng-repeat and the the button repeating.

Angular Filters

angular.module('filters.module',[])
  .filter('customeFltr',function(){
    return function(input){
      _len = input.length;
      _output = '';
      for(var i=0;i<_len;i++)
        _output += input[i].name + ', ';
      _output = _output.substring(0,(_output.length - 2));
      return _output
    }
  }); // end filter.module

EDIT 3/2021

angular.module('filters.module', [])
  .filter('customFltr', () => {
    return function(input){
      return input.reduce((acc, val) => {
        return `${acc}, ${val.name}`
      }, '')
    }
  })

edited Mar 11, 2021 at 15:23

answered Sep 11, 2015 at 13:03

m.e.conroy

3,53828 silver badges28 bronze badges

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

Comments

maddygoround · Accepted Answer · 2015-09-11 12:23:38Z

0

just use $index

report.deviceCategory[$index].name

Update : you can do ng-repeat inside ng-repeat

<tr data-ng-repeat="report in reportSummary">
    <td class="reports-list-table-column-device-category" 
            data-ng-if="report.deviceCategory.length !== 1">
        <ul>
            <li ng-repeat="device in report.deviceCategory">
                <button popover="{{device.name}}" 
            popover-title="Multi-category" type="button" class="btn btn-default">
                 Multi-category
              </button>
            </li>
        </ul>
    </td>
</tr>

edited Sep 11, 2015 at 12:23

answered Sep 11, 2015 at 12:17

maddygoround

2,3102 gold badges21 silver badges33 bronze badges

3 Comments

Treck Over a year ago

Nope, $index will give me only ng-repeat index, and what I need is yet another (from 0 to deviceCategory[n].length) index.

maddygoround Over a year ago

then you can do ng-repeat in ng-repeat.

Treck Over a year ago

That makes multiple buttons... and that is not what I need. I want iterated array deviceCategory in my popover="...".

Atul Vani · Accepted Answer · 2015-09-11 12:26:49Z

0

If your popover allows templates, try this (as mentioned by STEVER):

<tr data-ng-repeat="report in reportSummary">
    <td class="reports-list-table-column-device-category" data-ng-if="report.deviceCategory.length !== 1">
        <button popover-template="template.html" popover-title="Multi-category" type="button" class="btn btn-default">
             Multi-category
        </button>
   </td>
</tr>

<script type="text/ng-template" id="template.html">
    <ul>
        <li data-ng-repeat="item in report.deviceCategory">{{item}}</li>
    </ul>
</script>

answered Sep 11, 2015 at 12:26

Atul Vani

616 bronze badges

Collectives™ on Stack Overflow

Iterate in Angular expression

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related