in following demo showing more 1 value in single cell of table. if particular row's cell has 1 value nothing do. if has more 1 value, can hide , show values. hiding , showing happening in same cell.
i want in separate div. if number of value more won't effect table.like open div , show values cell inside dev..
please see demo, last row has more 1 value id column. want show expansion in separate div
please see 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; }); });
<td style="word-wrap:break-word"> <span ng-repeat="list in todolist.id| limitto: showmore ? todolist.id.length:1"> <a target="_blank" href="{{ 'http://'+common_url}}{{list}}"> <div> {{list}} </div></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> try this
Comments
Post a Comment