Remove materialisecss cards dynamically

Question

I am using materialisedcss and angularjs for designing my website.I have series a json data(from Rest) which will be displayed in the form of cards as shown below.

There will be two options which will be either to accept or reject the leave as shown in the picture.When the user selects any option ,the card will be revealed using materialised card-reveal class with two more options as shown below

Now my requirement is when the user clicks on the yes option,a function should be called that should remove the card from the view .How to do this using materialised and angularjs ?.Following are my code

Code for card display

<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>

as your using ng repeat....cant we remove that with using index of clicked one?? — Sa E Chowdary, Jun 08 '17 at 12:02

score 0 · Answer 1 · answered Jun 08 '17 at 12:13

0

You should use ng-class to define class of your element based on variable.

For a if / else test on ng-class; please see this explanation : https://stackoverflow.com/a/21970785/3687474

answered Jun 08 '17 at 12:13

aorfevre

5,034
3
21
51

as i am using ng-repeat how do you target that particular card and use ng-class – Vikhyath Maiya Jun 09 '17 at 05:10

Remove materialisecss cards dynamically

1 Answers1