Question

我创建了一个简单动画的简单应用程序，我可以在其中添加和删除项目（使用ng-fx作为动画），但我遇到了问题。

当我尝试添加新元素时，我得到ng-repeat duplicate error.我通过添加track by $index来修复它，但这次发生了新的错误。如果我尝试从列表中删除一个元素，则会错误地设置一个元素。

这是我的plnkr

http://plnkr.co/edit/hKk9VGHIE1GT2i3P8TtT?p=preview

这是我的代码。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="angular-animate.min.js"></script>
  <script src="ng-fx.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="FirstController">
    <div ng-repeat="name in names track by $index" class="fx-fade-normal">
      {{name}}
      <input type="submit" value="Remove" ng-click="remove($index)">
    </div>


    <input type="text" ng-model="name" />
    <input type="submit" value="Add" ng-click="add()">
  </div>
  <script>
    angular.module('app', ['ngAnimate', 'ng-fx']);

    angular.module('app').controller('FirstController', ["$scope", function($scope) {
      $scope.names = ["first", "second", "third", "fourth"];

      $scope.add = function() {
        $scope.names.push($scope.name);
      };

      $scope.remove = function($index) {
        $scope.names.splice($index, 1);
      };


    }]);
  </script>
</body>


</html>

Answer 1

这是一个简单的改变 ng-repeat =＆＃34;名称跟踪由$ index＆＃34; 到 ng-repeat =＆＃34;名称在名称中跟踪$ id（姓名）＆＃34;

Angularjs ng-fx动画应用于错误的元素

1 个答案: