Question

我正在使用angularjs和materialisedcss来设计我的网页。我有一系列卡片将使用ng-repeat显示。当用户点击一个按钮（id = btnConfirm）时，该卡片将从视图中删除。代码在下面

<div class="row">
<div ng-repeat="elem in leaveRequests" id="{{'card-'+$index}}" style="transition: all linear 0.5s;">
			<div class="col s12 m6 l4">
				<div class="card  red darken-2" style="margin-top:20px;" id="haha" >
					<div class="card-content white-text ">
						<span class="card-title ">{{elem.num}}{{$index}}</span>
						<p>Leave applied from {{elem.startDate |date}} to {{elem.endDate |date}} pending for approval </p>
						<div>
						
         				<a href="" style="display:inline-block" id="btnApproveReject"  class="activator" ng-click="setValue('Approve')"><div class="btn-floating waves-effect waves-light activator "><i class="fa fa-check activator" aria-hidden="true"></i></div><span id="acceptRejectButton" class="activator">Approve</span></a> 
     					
         				<a href="" style="display:inline-block" id="btnApproveReject" class="activator" ng-click="setValue('Decline')"><div class="btn-floating waves-effect waves-light red darken-2 activator  "><i class="fa fa-times activator" aria-hidden="true"></i></div><span id="acceptRejectButton" class="activator">Decline</span> </a>
     					</div>
						</div>

				<div class="card-reveal">
					<span class="card-title grey-text text-darken-4">Sure?<i
						class="material-icons right">close</i></span>
					<p>Are You Sure To {{value}} the leave Request</p>
					<a href="" style="display:inline-block" id="btnConfirm" ng-click="applyOrRejectLeave(elem.leaveID,value,$index)"><div class="btn-floating waves-effect waves-light  "><i class="fa fa-check" aria-hidden="true"></i></div><span id="confirmButton">YES</span></a> 
     					
         			<a href="" style="display:inline-block" id="btnReject" class="card-title" ><div class="btn-floating waves-effect waves-light red darken-2 "><i class="fa fa-times " aria-hidden="true"></i></div><span id="confirmButton" class="card-title">Cancel</span> </a>
     					
				</div>
			</div>
				</div>
			</div>
		</div>
		
</div>

</div>

和控制器

app.controller("ApproverController", function($scope, $http,mysignum,myname) {
    //$scope.data = [{title: 'welcome hello'},{title: 'great testing'}];

    $http.get("rest/leave/ApproverList", {}).success(function(data, status, headers, config) {
        $scope.leaveRequests = data;
    }).error(function(data, status, headers, config) {
        alert("error");
    });
    
    $scope.setValue=function(status)
    {
    	$scope.value=status;
    }
    
    $scope.trymadi=function(index)
    {
    	var myEl = angular.element( document.querySelector( '#card-'+index ) );
    	myEl.remove();
    	
    }
    
    $scope.applyOrRejectLeave=function(leaveId,response,index)
    {
    	console.log(leaveId+" "+response);
    	$scope.test={};
    	$scope.test.leaveId=leaveId;
    	$scope.test.response=response;
    	var jsonData=JSON.stringify($scope.test);
    	console.log(jsonData);
    	
    	$http({
    	    url: "rest/leave/leaveResponse",
    	    method: "POST",
    	    data: jsonData,
    	    headers: {'Content-Type': 'application/json'}
        
        }).success(function(data, status, headers, config) {
            if (data) {
            	$scope.trymadi(index);
            	    
            }
        }).error(function(data, status, headers, config) {
            alert("error from create leave");
        });
 
    }
});

这很好。但我的问题是

1.它是首选的角度方式。如果不怎么做。 2.如果是，那么如何在元素移除期间应用转换，因为现在元素立即被移除而没有任何转换。如何去做。

请帮助，任何帮助将不胜感激

Answer 1

您可以使用jquery

应用一些动画

$target.hide('slow');

或

$target.hide('slow', function(){ $target.remove(); });

运行动画，然后从DOM中删除它

Answer 2

使用ngAnimate。请参阅以下链接。 https://docs.angularjs.org/api/ngAnimate

https://docs.angularjs.org/guide/animations

http://theoinglis.github.io/ngAnimate.css/#/

删除元素期间的转换

2 个答案: