Create line in a dynamic way

Asked

Viewed 58 times

0

The doubt is the following I need to create a row in my table always the date change how I could do it follows the table:

<table  class="table table-striped" height="100%">
    <thead>
        <tr>
            <th width="170px" class="fileName alignCenter"><label class="titLabel">Date Event</label></th>
            <th width="170px" class="fileName alignCenter"><label class="titLabel">Event Type</label></th>
            <th width="150px"  class="alignCenter"><label class="titLabel">&nbsp;RE1A</label></th>
            <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE2A</label></th>
            <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE3A</label></th>
            <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE4A</label></th>
            <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE5A</label></th>
            <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE6A</label></th>
            <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;RE7A</label></th>
            <th width="150px" class="alignCenter"><label class="titLabel">&nbsp;Total Event</label></th>
        </tr>
    </thead>
    <tbody>
        <tr id="no-results" ng-hide="{{noResults}}" ng-show="{{!noResults}}">
        </tr>
        <tr ng-repeat="output in result">
            <td width="170px" class="alignCenter"><label>&nbsp;{{output.referenceDate | date:'dd/MM/yyyy'}}</label></td>
            <td width="170px" class="alignCenter"><label>&nbsp;{{output.eventType}}</label></td>
            <td width="170px" class="alignCenter"><label>&nbsp;{{output.re1A}}</label></td>
            <td width="170px" class="alignCenter"><label>&nbsp;{{output.re2A}}</label></td>
            <td width="170px" class="alignCenter"><label>&nbsp;{{output.re3A}}</label></td>
            <td width="170px" class="alignCenter"><label>&nbsp;{{output.re4A}}</label></td>
            <td width="170px" class="alignCenter"><label>&nbsp;{{output.re5A}}</label></td>
            <td width="170px" class="alignCenter"><label>&nbsp;{{output.re6A}}</label></td>
            <td width="170px" class="alignCenter"><label>&nbsp;{{output.re7A}}</label></td>
            <td width="170px" class="alignCenter"><label>&nbsp;{{(output.re1A)+(output.re2A)+(output.re3A)+(output.re3A)+(output.re4A)+(output.re5A)+(output.re6A)+(output.re7A)}}</label></td>
        </tr>
        <tr  class="primary">
            <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">Total RE</label></td>
            <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{output.eventType}}</label></td>
            <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE1A()}}</label></td>
            <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE2A()}}</label></td>
            <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE3A()}}</label></td>
            <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE4A()}}</label></td>
            <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE5A()}}</label></td>
            <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE6A()}}</label></td>
            <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalizarRE7A()}}</label></td>
            <td width="170px" class="alignCenter" bgcolor="#044a75"><label class="titLabel">{{totalEvent()}}</label></td>
        </tr>   

The line I need to create dynamically would be this second line.

  • Without the CSS you used the code it is difficult to analyze.

1 answer

0

I’ll summarize the code a little bit, but you can use it like this:

<td ... ng-repeat="item in list"> {{ generateTotal(item) }} </td>

And in the controller you have to create:

var list = ['RE1A', ... , 'RE10A'];

var generateTotal = function(value){
  switch(value){
    case 'RE1A': ...
    ...
  }
}

There may be other ways, but I think you can solve your problem. Then you need to see your code and generate the array list dynamically.

  • opa then guy did not understand very well why I need to assemble this line comparing to the date this in the table when the date change I need to create the line

Browser other questions tagged

You are not signed in. Login or sign up in order to post.