Add UI button on portal list

[sravanip]

HI

In portal under profile page we are showing list of hardware owned by the logged In user.

In widget using "ng-repeat="item in data.list track by item.sys_id" we display list of hardwares owned by the user. User may have multiple hardwares.

We display warranty data in the list. IF the warranty is expired then we have to include an UI button next to the warranty date. 

On clicking the button... user should be navigating to existing catalog request form. Button should be present to all the hardware where warranty is expired. 

Looking for suggestion how to check the condition and display the button.

Thank You

[sravanip]

HI

below code is to display data from hardware table. 

<tbody>
<tr ng-repeat="item in data.list track by item.sys_id">
<td role="cell"
class="pointer sp-list-cell"
ng-class="{selected: item.selected}"
ng-click="go(item.targetTable, item)"
ng-repeat="field in ::data.fields_array"
data-field="{{::field}}"
data-th="{{::data.column_labels[field]}}">
<div class="same-line">
<img class="item-icon" ng-src="{{::item.icon}}" ng-if="$first && item.icon"/>
<span ng-if="$first" aria-label="${Open record}: {{::item[field].display_value}}" role="link" tabindex="0">
{{::item[field].display_value | limitTo : item[field].limit}}{{::item[field].display_value.length > item[field].limit ? '...' : ''}}
</span>
<span ng-if="!$first">
{{::item[field].display_value | limitTo : item[field].limit}}{{::item[field].display_value.length > item[field].limit ? '...' : ''}}
</span>
</div>
<div class="col-sm-4">
<button type="button" style="width:150px" class="btn btn-primary btn-block btn-center_small" ng-if="isWarrantyExpired" id="warrantyExpired" ng-click="c.uiAction()">Refresh</button>
</div>
</td>
</tr>
</tbody>
</table>

with the above code i see the Button being added below every data in the row.

Instead the button should be present on at end of each row if warranty date is less than current date.