Добавить элементы ниже строки <td> - PullRequest
Новая
       0

Добавить элементы ниже строки <td>

0 голосов
/ 31 октября 2018

В моем приложении angularjs есть строки (с помощью ng-repeat), созданные с помощью. enter image description here Код, создающий строки ниже: 

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

Я пытаюсь реализовать что-то, что, когда вы нажимаете стрелку, строка расширяется с информацией, которая выглядит следующим образом: enter image description here Я, однако, не могу заставить информацию появляться внизу, как это. Что я должен пытаться реализовать, чтобы получить текст вдоль нижней части - flex box, inline-box?

Ответы [ 3 ]

0 голосов
/ 31 октября 2018

Попробуйте код ниже для вашего сценария. 

(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>
0 голосов
/ 31 октября 2018

Вы можете попробовать следующее:

  1. переместите нг-повтор на ваше тело
  2. добавьте ng-init = "data.showSubRow = false" в ваше тело
  3. добавить еще одну строку к телу, которая должна быть видимой, только если showSubRow имеет значение true

чтобы ваш ng-повтор был похож на 

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

Рабочий образец ----> Демо

0 голосов
/ 31 октября 2018

Взгляните на Bootstrap collapse.js . Я думаю, что это то, что вы ищете, конечно, вы должны изменить его, чтобы удовлетворить ваши потребности.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...