Question

In this plunk我试图复制我的问题，但我不能这样做是最好的近似。

如果单击该按钮，则会向表中添加一行。此外，行背景将在两秒后改变颜色和淡入淡出。由于表中的最大行数为3，因此在添加第四行时，ngTable将添加一个页面。如果您转到下一页，然后返回，在我的环境中，您会看到第一页中的第四行两秒钟，然后它就会消失。

当我通过单击其标题对列进行排序时，会发生另一个类似的症状，我还会获得额外的行两秒钟，然后它就会消失。

同样，这在Plunker中工作正常但在我的环境中却不行。 如果我在我的环境中禁用效果，则ngTable可以正常工作。

与效果有冲突吗？ 有不同的方式来实现这种效果吗？

HTML

    <table ng-table="tableParams" class="table table-bordered">
        <tbody>
            <tr ng-repeat="u in $data" 
                ng-class="{true: 'select-row', false: 'unselect-row'}[u.select]">
                <td title="'ID'">
                    {{ u.uid }}
                </td>
                <td title="'Name'">
                  {{ u.nm }}
                </td>
        </tbody>
    </table>

    <br/>
    <button ng-click="appendRow()">Append row</button>

的Javascript

var app = angular.module('app', ['ngTable']);

app.controller('myCtl', function($scope,$timeout,NgTableParams) {

      $scope.data = [{
          uid: 1,
          nm: 'aaa'
      }, {
          uid: 2,
          nm: 'bbb'
      }];

      $scope.tableParams = new NgTableParams({
          count: 3
      }, {
          dataset: $scope.data
      });


      $scope.appendRow = function(){
        var len = $scope.data.length;
        $scope.data.push({ uid: len + 1, nm: 'XXXXX' });
        selectRow(len);
        $scope.tableParams.reload();
      };


     var selectRow = function(row){
        $scope.data[row].select = true;
        $timeout(function(){
            $scope.data[row].select = false;
        },2000);
    };

});

更新

这是我发现的：因为$scope.data[row].select的值为false，所以只要有分页，ngTable就会获得效果，即使$scope.data[row].select未事先设置为true。这个类转换是不必要的触发，并使ngTable显示转换时间的额外行，然后消失：

.unselect-row {
    background-color: transparent;
    transition: 1.2s linear all; 
}

Answer 1

删除触发动画的对象成员解决了问题，否则ngTable会在分页时不必要地触发动画：

        $scope.data[row].select = false;
        $timeout(function(){
            delete $scope.data[row].select;
        },1000);

附加行时ngTable中的奇怪行为

1 个答案: