2017-06-08 13 views
0

私は、私のウェブサイトをデザインする際にmaterialisedcssとangularjsを使用しています。以下に示すようにカードの形で表示されるjsonデータ(Restから)があります。 enter image description herematerialisecssカードを動的に削除する

picture.Whenに示すように休暇を受け入れるか拒否するために、ユーザーが任意のオプションを選択し、カードを使用して明らかにされるであろういずれかの二つの選択肢がありますがのように2つのオプションでカード-公開クラスをマテリアマテリアライズドとangularjs今、ユーザーが[はい]オプションをクリックしたときに私の要件は、関数が呼び出されるべきれる使用して、これを行うために.Howビューからカードを削除する必要があり、その enter image description here

の下に表示?.Following私のコード

です

カードの表示コード

<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

あなたの使用している繰り返し... ....私たちはクリックしたもののインデックスを使用してそれを削除するか? –

+0

どうすればいいですか、あなたはどのリソースを –

答えて

0

あなたは変数に基づいて、あなたの要素のクラスを定義するためにng-classを使用する必要があります。

ng-classのif/elseテストでは、この説明を参照してください:https://stackoverflow.com/a/21970785/3687474

+0

に向けることができますか?ng-repeatを使用しているので、どのようにその特定のカードをターゲットにして、ng-class –

関連する問題