2017-06-08 5 views
0

Ich verwende materialisedcss und angularjs für die Gestaltung meiner Website.Ich habe eine Reihe von JSON-Daten (aus dem Rest), die in Form von Karten wie unten angezeigt werden. mit materialisierte Karten offenbare Klasse mit zwei weiteren Optionen enter image description hereEntfernen Materialisecss Karten dynamisch

es zwei Möglichkeiten sein, die entweder sein werden, um den Abschied zu annehmen oder ablehnen, wie in der picture.When wählt der Benutzer eine Option gezeigt, wird die Karte aufgedeckt als unten gezeigt enter image description here

Nun meine Anforderung ist, wenn der Benutzer auf die Option ja klickt, sollte eine Funktion aufgerufen werden, um die Karte aus der Ansicht entfernen sollte .Wie diese Verwendung zu tun materialisiert und AngularJS? .Following sind mein Code

Code für Kartenanzeige

<div class="row"> 
 
<div ng-repeat="elem in leaveRequests"> 
 
\t \t \t <div class="col s12 m6 l4"> 
 
\t \t \t \t <div class="card red darken-2" style="margin-top:20px;" > 
 
\t \t \t \t \t <div class="card-content white-text "> 
 
\t \t \t \t \t \t <span class="card-title ">{{elem.signum}}</span> 
 
\t \t \t \t \t \t <p>Leave applied from {{elem.startDate |date}} to {{elem.endDate |date}} pending for approval </p> 
 
\t \t \t \t \t \t <div> 
 
\t \t \t \t \t \t 
 
      \t \t \t \t <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> 
 
     \t \t \t \t \t 
 
      \t \t \t \t <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> 
 
     \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 

 
\t \t \t \t <div class="card-reveal"> 
 
\t \t \t \t \t <span class="card-title grey-text text-darken-4">Sure?<i 
 
\t \t \t \t \t \t class="material-icons right">close</i></span> 
 
\t \t \t \t \t <p>Are You Sure To approve the leave Request</p> 
 
\t \t \t \t \t <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> 
 
     \t \t \t \t \t 
 
      \t \t \t <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> 
 
     \t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
</div> 
 

 
</div> 
 

 
<script> 
 

 
</script>

+0

als Ihre Verwendung ng wiederholen .... können wir das mit der Verwendung von Index von angeklickt entfernen? –

+0

Wie können wir das tun, können Sie mich zu jeder Ressource –

Antwort

0

sollten Sie ng-class verwenden Klasse Ihres Elements auf variable Basis zu definieren.

Für einen if/else Test auf ng-Klasse; bitte sehen Sie diese Erklärung: https://stackoverflow.com/a/21970785/3687474

+0

wie ich mit ng-wiederholen, wie zielen Sie diese bestimmte Karte und verwenden Sie ng-Klasse –