Angularjs：单击表格中的任何单元格时，在单独的 div 中显示/隐藏值答案

【问题标题】：Angularjs: Show/hide values in separate div, when click on any cell in tableAngularjs：单击表格中的任何单元格时，在单独的 div 中显示/隐藏值
【发布时间】：2017-01-21 00:45:12
【问题描述】：

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

我想在 单独的 div 中执行此操作。这样如果值的数量更多，它就不会影响表格。就像它打开一些 div 并显示该 dev 内单元格中的所有值..

请看演示，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('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;
        });
      });

【问题讨论】：

第一列可以设置固定宽度，所以显示和隐藏只影响行高，不影响宽度tr td:first-child {width: 40%;}
预期结果是什么？它们与演示有何不同？
@charlietfl like 它会打开一些 div 并显示该 dev 内单元格中的所有值..
只需将整个todolist 对象传递给ng-click 中的函数。在范围内将其设为 selectedItem 或任何您想调用的名称。然后为同一变量模板化该 div

标签： javascript jquery html css angularjs

【解决方案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>

试试这个

【讨论】：

【解决方案2】：

用您的“显示更多”ng-click 替换为：

ng-click=" assignToDiv(todolist) "

函数将是：

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

然后将您的 div 绑定到 showInDiv（然后根据需要显示 div）：

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

【讨论】：