Angularjs: Show/hide values in separate div, when click on any cell in table

Question

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;
        });
      });

You can set fixed width to the first column, so showing and hiding will affect only the height of the row but not the width tr td:first-child {width: 40%;} — Nora
– Nora, Commented Jan 24, 2016 at 18:40
@charlietfl like It open some div and show all value from cell inside that dev.. — Neelabh Singh
– Neelabh Singh, Commented Jan 24, 2016 at 18:43
just pass the whole todolist object to a function in ng-click. In scope make it selectedItem or whatever you want to call it. Then template that div for same variable — charlietfl
– charlietfl, Commented Jan 24, 2016 at 18:46

Suresh Reddy Guntaka · Accepted Answer · 2016-01-24 18:55:13Z

1

<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

answered Jan 24, 2016 at 18:55

Suresh Reddy Guntaka

8491 gold badge7 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dev8080 · Accepted Answer · 2017-01-20 16:45:12Z

0

Replace with your 'Show More" ng-click with this:

ng-click=" assignToDiv(todolist) "

and the function will be:

$scope.assignToDiv = function(arr){
    $scope.showInDiv = arr;
};

And then bind your div to the showInDiv (then show the div as desired):

<div>
      <a ng-repeat=" id in showInDiv.id " > {{ id }}</a> 
</div>

answered Jan 20, 2017 at 16:45

dev8080

4,0051 gold badge15 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angularjs: Show/hide values in separate div, when click on any cell in table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related