0
単純なアニメーションで単純なアプリケーションを作成しましたが、配列にアイテムを追加したり削除したりできますが、問題があります。Angularjs 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="[email protected]" 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>
感謝 "の名前で名前が$のID（名前）でトラック" が、それは主な問題を解決しない、私はまだ配列に同じ値を2回追加しようとすると二重引用符エラーを取得します。あなたは働くplnkrを共有していただけますか？ – salep
それはここで働いています。 http://plnkr.co/edit/AIQVzC0biseLbRgAHJr2?p=preview。 $ id（name）によるtrackは、$ indexによるtrackと同じように動作します。 https://docs.angularjs.org/api/ng/directive/ng返信 –
ありがとうございますが、今回もアニメーションの問題が発生します。ページの上部から要素を削除しようとすると、要素は削除されますが、予期したとおりには削除されません。 – salep