动态删除materialisecss卡

时间:2017-06-08 12:00:27

标签: css angularjs materialize

我正在使用materialisedcss和angularjs来设计我的网站。我有一系列json数据(来自Rest),它将以卡片的形式显示,如下所示。 enter image description here

将有两个选项可以接受或拒绝请假,如图所示。当用户选择任何选项时,将使用具有两个选项的物化卡片显示类显示该卡,如下所示 enter image description here

现在我的要求是当用户点击yes选项时,应调用一个应该从视图中删除卡的函数。如何使用materialized和angularjs执行此操作?以下是我的代码

卡片显示代码



<div class="row">
<div ng-repeat="elem in leaveRequests">
			<div class="col s12 m6 l4">
				<div class="card  red darken-2" style="margin-top:20px;" >
					<div class="card-content white-text ">
						<span class="card-title ">{{elem.signum}}</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 approve the leave Request</p>
					<a href="" style="display:inline-block" id="btnConfirm" ng-click="applyOrRejectLeave(elem.leaveID,value)"><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>

<script>

</script>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您应该使用ng-class根据变量定义元素的类。

对于ng-class进行if / else测试;请参阅此说明:https://stackoverflow.com/a/21970785/3687474