Question

无论我提交或删除一条记录，动画都会移动所有记录而不是一条记录。我确实知道show_data函数是问题的原因。有什么解决方案，它只动画新插入/删除记录吗？我尝试添加一个子数组来存储临时数据并显示它而不调用show_data。但是我认为这不是一个好习惯。

<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Testing</title>

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>

	<style>
		.foodie {
			overflow: hidden;
		}

		.foodie.ng-enter {
			transition: 0.5s linear all;
			opacity: 0;
		}

		
		.foodie.ng-enter.ng-enter-active {
			opacity: 1;
		}


		.foodie.ng-leave {
			transition: 0.5s linear all;
			transform: translateX(0);
			opacity: 1;
		}

		
		.foodie.ng-leave.ng-leave-active {
			transform: translateX(-100%);
			opacity: 0;
		}
	</style>

</head>

<body ng-app="myapp" ng-controller="myCtrl" ng-init="show_data()">

	<div class="container">
		<div class="row">
			<div class="col-6">
				
				<div class="jumbotron" style="margin-top:50px;">
					<h1 class="display-4">Display Food</h1>
					<hr class="my-4">

					<ul class="list-group">
						<li class="list-group-item d-flex justify-content-between align-items-center foodie"
							ng-repeat="item in foods | orderBy :'price'">
							{{item.name}}
							<footer class="blockquote-footer">${{item.price}}</footer>
							<span class="badge badge-danger" ng-click="remove_data(item.id)">Remove</span>
						</li>
					</ul>
				</div>

			</div>
			<div class="col-6">
				
				<div class="jumbotron" style="margin-top:50px;">
					<h1 class="display-4">Enter Food</h1>
					<hr class="my-4">

					<form>
						<div class="form-group">
							<label for="example1">Food Name</label>
							<input type="text" class="form-control" id="example1" ng-model="foodName">
						</div>
						<div class="form-group">
							<label for="example2">Price $</label>
							<input type="text" class="form-control" id="example2" ng-model="foodPrice">
						</div>
					</form>
					<button type="button" ng-click="insert_food()" class="btn btn-primary float-right">Add</button>

				</div>

			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
	</script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
	</script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
	</script>

	<script>
		var app = angular.module("myapp", ['ngAnimate']);
		app.controller('myCtrl', function ($http, $scope) {

			$scope.show_data = function () {
				$http.get("viewData.php")
					.then(function (response) {
						$scope.foods = response.data;
					});
			}


			$scope.insert_food = function () {
				$http.post("action.php", {
						'name': $scope.foodName,
						'price': $scope.foodPrice,
						'requestNo': 1
					})
					.then(function (response) {
						$scope.foodName = null;
						$scope.foodPrice = null;
						$scope.show_data();
					})

			};

			$scope.remove_data = function (id) {
				$http.post("action.php", {
						'id': id,
						'requestNo': 2
					})
					.then(function (response) {
						$scope.show_data();
					})
			}

		});
	</script>
</body>

</html>

有没有办法用php和angularjs ngAnimate动画新插入/删除的记录

0 个答案: