javascript - Angularjs:单击表格中的任何单元格时，在单独的 div 中显示/隐藏值

Question

在下面的演示中，我在表格的单个单元格中显示了多个值。如果任何特定行的单元格具有一个值，则无需执行任何操作。但如果它有多个值，那么我们可以隐藏和显示这些值。 隐藏和显示发生在同一个单元格中。

我想在单独的 div 中执行此操作。因此，如果值的数量更多，它不会影响表格。比如它打开一些 div 并显示该开发人员内部单元格的所有值。

请看演示，最后一行的 ID 列有多个值。我想在单独的 DIV

中显示此扩展

请参阅DEMO

查看

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

Answer 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>

试试这个