Angularjs: Show / hide values ​​in separate div, when you click any cell in the table

advertisements

In following demo I am showing more than one value in single cell of table. If any particular row's cell has one value then nothing to do. But if it has more than one value, then we can hide and show the values. Hiding and showing are happening in same cell.

I want to do this in separate div. So that If number of value are more the It won't effect the table.like It open some div and show all values from cell inside that dev..

Please see the demo, Last row has more than one value for ID column. I want to show this 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