Можно ли анимировать элементы AngularJS ngRepeat из многомерных (вложенных) массивов? - PullRequest
Новая
       24

Можно ли анимировать элементы AngularJS ngRepeat из многомерных (вложенных) массивов?

0 голосов
/ 09 мая 2019

У меня есть таблица, построенная из многомерного массива, где каждый элемент в массиве является другим массивом, представляющим строку в таблице, и каждый элемент во вложенном массиве содержит данные ячейки.

У меня также есть заголовки таблиц в отдельном массиве.

Я могу анимировать удаление строки (элементов массива верхнего уровня), просто назначив tr классу и предоставив css для класса .ng-left-active. Час колонки также отлично анимируется, но выполнение того же действия с (вложенным) тд полностью игнорируется.

Вы можете увидеть странное поведение в фрагменте ниже. Время преувеличено, чтобы продемонстрировать проблему.

Можно ли анимировать удаление или добавление элементов вложенных массивов? 

var app = angular.module('myApp', ["ngAnimate"]);
app.controller('myCtrl', function($scope) {
  $scope.fields = [{"title": "City"},{"title":"Burger Kings"},{"title":"McDonalds"},{"title":"Taco Bells"}];
  $scope.data = [
    [{ "value": "Lahaina" }, { "value": "1" }, { "value": "2" }, { "value": "1" }],
    [{ "value": "Wailuku"}, { "value": "0"}, { "value": "3"}, { "value": "0"}],
    [{ "value": "Kahului"}, { "value": "3"}, { "value": "3"}, { "value": "1"}],
    [{ "value": "Kihei"}, { "value": "0"}, { "value": "1"}, { "value": "1"}]
  ];

  $scope.removeRow = function(index) {
    $scope.data.splice(index, 1);
  };

  $scope.removeColumn = function (index) {
    var i;
    $scope.fields.splice(index, 1);
    for (i = 0; i < $scope.data.length; i++) {
      $scope.data[i].splice(index, 1);
    }
  };
});
table {
  border-collapse: collapse;
  width: 100%;
}
td,th {
  border: 1px solid #333333;
  padding: .5em;
}
th {
  background-color: #EEEEEE;
}

.remove-row::after {
  content: "\00d7"; /*&times;*/
  color: #333333;
  padding: 0 .25em;
  vertical-align: middle;
  font-size: 24px;
  line-height: .75;
  white-space: pre;
  display:inline-block;
  text-align: center;
}

.remove-column::after {
  content: "\00d7"; /*&times;*/
  color: #333333;
  padding: 0 .25em;
  float: right;
  font-size: 24px;
  line-height: .75;
}

.removable-row, .removable-column {
  transition: all linear 1s;
}

.removable-row.ng-leave-active, .removable-column.ng-leave-active {
  background-color: #EEEECC;
  box-shadow: 2px 2px 2px 2px #EEEECC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-animate.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <table>
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th class="removable-column" ng-repeat="item in fields">
            {{item.title}}<span class="remove-column" ng-click="removeColumn($index)"></span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="removable-row" ng-repeat="row in data">
          <td><span class="remove-row" ng-click="removeRow($index)"></span></td>
          <td class="removeable-column" ng-repeat="dat in row track by $index">{{dat.value}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
...