Question

在我的angularjs应用中，存在通过创建的行（使用ng-repeat）。创建行的代码如下：

<tbody>
    <tr ng-repeat="data in downloads">
        <td data-title="ID">{{$index + 1}}</td>



        <td data-title="User">{{data.user_name}}</td>
        <td data-title="Issue">{{data.download_name}}</td>
        <td data-title="Progress">{{data.size}}</td>

        <td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
        <td class="information-parent" data-title="More">
            <md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
        </td>
    </tr>
</tbody>

我正在尝试实现一些功能，当您单击箭头时，该行将扩展，显示如下信息：但是，我无法像这样将信息显示在底部。我应该尝试实现什么以使文本沿着底部-弹性框，内嵌框？

Answer 1

看看Bootstrap collapse.js。我认为这就是您要寻找的，当然，您必须更改它才能满足您的需求。

Answer 2

为您的方案尝试以下代码。

(function(ng, app){

    app = angular.module('app', [])

    app.controller("mainController", ['$scope',
      function($scope) {
        $scope.downloads = [{
            "user_name": "John",
            "download_name": "Doe jhonejhonejhone",
            "size": "0 byte"
          },
          {
            "user_name": "Anna",
            "download_name": "Doe DoeDoeDoeDoe",
            "size": "0 byte"
          },
          {
            "user_name": "Maron",
            "download_name": "Anna DoeDoeDoeDoeDoe",
            "size": "5 byte"
          }
        ];

        $scope.editFiles = function() {
          $scope.editBar = true;
        };

        $scope.remove = function(index) {
          $scope.downloads.splice(index, 1);
        };

      }
    ]);

}(angular));

.btn-primary{
    margin-right: 10px;
}

<html ng-app="app">

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container" ng-controller="mainController">
    <div class="row">
      <div class="col-md-12">
        <input type="submit" class="btn btn-primary addnew pull-left" value="Edit Files" ng-click="editFiles()">
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-body">
            <form>
              <table border=1 class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>
                      <b> # </b>
                    </th>
                    <th>User</th>
                    <th>Download Name</th>
                    <th>Complete Name</th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="data in downloads">
                    <td>
                      <b> {{$index + 1}} </b>
                    </td>
                    <td>
                      {{data.user_name}}                   
                    </td>
                    <td>
                      {{data.download_name}}
                      
                      <div class="btn-group pull-right" ng-show="editBar">
                        <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button>
                        <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash" ng-click="remove($index)"></span></button>
                      </div>
                      
                    </td>
                    <td>
                      {{data.size}}
                    </td>
                  </tr>
                </tbody>
              </table>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 3

您可以尝试以下操作：

将ng-repeat移到身体上
将ng-init =“ data.showSubRow = false”添加到您的躯干中
向tbody添加另一行，该行仅在showSubRow为true时才可见

所以您的ng-repeat看起来像

<tbody ng-repeat="data in downloads" ng-init="data.showSubRow = false">
    <tr>
        visible row
    </tr>
    <tr ng-show="data.showSubRow">
        visible when clicked
    </tr>
</tbody>

现在您可以在每行中添加单独的按钮，以显示/隐藏单独行中的内容，或添加使所有子行可见的全编辑功能

显示/隐藏单个行

   <tr>
        <td data-title="ID">
            {{$index + 1}
            <span>
                <button ng-show="!data.showSubRow" ng-click="data.showSubRow = true">+</button>
                <button ng-show="data.showSubRow" ng-click="data.showSubRow = false">-</button>
            </span>
        </td>
        <td data-title="User">{{data.user_name}}</td>
        <td data-title="Issue">{{data.download_name}}</td>
        <td data-title="Progress">{{data.size}}</td>

        <td data-title="Completed time" am-time-ago="data.completed_time|amFromUnix"</td>
        <td class="information-parent" data-title="More">
            <md-icon ng-click="switchIcon()" class="bassa-red-color">{{icon}}</md-icon
        </td>
    </tr>

显示全部

  $scope.editAll = function(){
    angular.forEach($scope.downloads, function(value, key) {
      value.showSubRow = !value.showSubRow;
    });
  }

工作示例----> Demo

在第

3 个答案: