In the following demonstration, I am displaying multiple values in a single cell of a table. If a particular row's cell has only one value, there is no action needed. However, if it contains more than one value, we can hide and show these values within the same cell. The hiding and showing actions take place within the same cell.
I would like to achieve this using a separate div. This way, if the number of values exceeds the space in the table cell, it won't affect the layout. Instead, it will expand a separate div to display all the values from that cell.
Please check out the demo – the last row contains multiple values for the ID column. I want this expansion to be displayed in a separate DIV.
View the DEMO
View
<tbody>
<tr ng-repeat="todolist in todolists">
<td>
<span ng-repeat="list in todolist.id| limitTo: showMore ? todolist.id.length:1">
<a target="_blank" href="{{ 'http://'+common_url}}{{list}}"> {{list}}</a>
</span>
<a ng-show="todolist.id.length>1 && showMore==false" ng-click="showMore = true">....show {{todolist.id.length-1}} more</a>
<a ng-show="showMore==true" ng-click="showMore = false">....show less</a>
</td>
<td>{{todolist.bill_number}}</td>
<td>{{todolist.location}}</td>
<td><a target="_blank" href="{{ 'http://' + todolist.url}}">Download Invoice : <i title="Download Invoice" style="padding-left:5px;cursor:pointer;color:black;" class="fa fa-download"></i></a> </td>
</tr>
</tbody>
</table>
Controller
.controller('ctrl', function($scope) {
$scope.showMore=false;
$scope.common_url="localhost:8000";
$scope.todolists = [{
"id": "id_584",
"customer_id": 2,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_122",
"customer_id": 3,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_128",
"customer_id": 4,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_805",
"customer_id": 5,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id": "id_588",
"customer_id": 6,
"url": "url",
"bill_number": "123",
"location": "from_location"
}, {
"id":"id_115,id_114,id_116,id_130,id_118,id_119",
"customer_id": 7,
"url": "url",
"bill_number": "123",
"location": "from_location"
}]
$scope.todolists.forEach(function(item){
var multiple_orders = item.id.split(',');
item.id=multiple_orders;
});
});