CODEWITHSUNDEEP
angularjs
Ashlesh
Ashlesh

Reputation: 357

How do I change the button to text on clicking the button which is inside ng-repeat?

Here is the view of the page-

enter image description here

Here is the angular code-

<tr ng-repeat="(key,value) in requestsObj">
    <!-- <td>{{requestsObj[key].bookingId}}</td> -->
  <td>{{requestsObj[key].d}}</td>
  <td >{{requestsObj[key].user}}</td>
  <td>{{requestsObj[key].foodType}}</td>
  <td>{{requestsObj[key].numOfPeople}}</td>
  <td>{{requestsObj[key].address}}</td>



  <td ng-if="!status(requestsObj[key].bookingId,requestsObj[key].accepted)" >
    <button ng-click='accept(requestsObj[key].bookingId,requestsObj[key].accepted)'>Accept</button>
    <button ng-click='decline(requestsObj[key].bookingId)'>Decline</button>
  </td>
    <td ng-if="status(requestsObj[key].bookingId,requestsObj[key].accepted)" ng-bind="Currentstatus"></td>
</tr>

So, what I want is that on clicking the accept or decline button it should show Accepted/Declined for that particular row dynamically. How can I achieve this?

Upvotes: 0

Views: 94

Answers (1)

Purplenimbus
Purplenimbus

Reputation: 386

Lets clean up your code a bit

<tr ng-repeat="value in requestsObj">
<!-- <td>{{value.bookingId}}</td> -->
  <td>{{value.d}}</td>
  <td>{{value.user}}</td>
  <td>{{value.foodType}}</td>
  <td>{{value.numOfPeople}}</td>
  <td>{{value.address}}</td>

  <td ng-if="!value.status">
    <button ng-click="status(value,'accept')">Accept</button>
    <button ng-click="status(value,'decline')">Decline</button>
  </td>
  <td>{{ value.status }}</td>
</tr>

value is literally requestsObj[key] , heres a working plunker

There are many ways to do it but here is one way to handle the click event in your controller

  $scope.status = function(item,status){
    item.status = status;
    //send to api here?
  };

Upvotes: 2

Related Questions