Angularjs ng-repeat动画与数组中的相同元素

问题描述：

当范围内的数组更改时，我使用angularjs向表中添加动画。这里是HTML代码：Angularjs ng-repeat动画与数组中的相同元素

<div ng-app="myapp" ng-controller="myCtrl"> 
     <table> 
      <tr ng-repeat="x in items track by $index" class="fade2">         
       <td > 
        {{ x }} 
       </td> 
      </tr> 
     </table> 
    <button ng-click="add()">add</button> 
    <button ng-click="reset()">reset</button>  
</div>

和JavaScript代码：

var app = angular.module('myapp', ['ngAnimate']); 
app.controller('myCtrl', function($scope) { 
    $scope.items = ['hello']; 

    $scope.add = function() { 
     $scope.items.push('hello') 
    } 

    $scope.reset = function() { 
     $scope.items = ['hello','hello','hello','hello']; 
    } 
});

添加后一些CSS，它工作正常，如果我按一下按钮“添加”和“复位”，然而，当我点击重置两次，没有动画。实际上，数组已更新，但$ scope.items数组中的元素不会更改。如何为这种情况添加动画？

如果您单击重置两次是不一样的阵列，并不会改变？可以试试$ scope.items = []; $范围$适用（）。 $ scope.items = ['hello'，'hello'] 虽然感觉哈克。什么是CSS的样子？ –

@fudy，因为即使'$ scope.reset（）'被多次调用以设置一个新数组，'$ index'跟踪'items'，就ng-repeat而言，数据没有改变（即新数组中的项目数量相同），因此它不会触发重新渲染。如果你仍然想要一个解决方法来强制你的动画，这个问题的要点将帮助你 - https://stackoverflow.com/questions/12595656/angular-js-is-it-possible-to-re-render-ng-重复基于现有的范围数据 – miqid

答

我不明白你为什么会想重置每一次动画，但this可能必需做到

$scope.reset = function() { 
    $scope.items = []; 
    $timeout(function(){ 
     $scope.items = ['hello','hello','hello','hello']; 
    },200); 
}

感谢你的例子，它的工作原理，但它似乎有点棘手。 – fudy

Angularjs ng-repeat动画与数组中的相同元素

相关推荐