how to Change button text in each row in angularjs

Question

I am fetching data from the rest service in angularjs and the data is shown in the form of a table using ng-repeat. I am creating a Activate/Deactivate button based on the value of the variable,say if the value is true then show Activate button else Deactivate button. here is my controller

   $scope.btnText='Deactivate';
      $scope.active={};
     FetchDomainService.get(function(
       response) {
        $scope.domains = response;
        $scope.active=$scope.domains[0].isActive;
          if(  $scope.active==='true'){
  $scope.btnText==='Activate';
     }
    });

and here is my html code

   <tr ng-repeat="domain in domains">

                <td>{{domain.clientId}}</td>
                <td>{{domain.jndisys}}</td>
                <td>{{domain.buildVersion}}</td>
                <td>{{domain.domainUuid}}</td>
                <td>{{domain.isActive}}</td>
                <td>

                    <button class="btn"
                        ng-click="">
         <span class="glyphicon glyphicon-pencil"></span>{{btnText}}
                    </button>
                </td>

            </tr>

Now the issue is....how can i change the btn text in every row..I am able to change it in all rows but not on a single row.i need to check every row and then change button text. the isActive is an boolean and if it is true then the button text is 'Activate' and if the value of isActive is false then the button text is Deactivate.

ababashka · Accepted Answer · 2015-10-20 10:57:29Z

3

You can add some field for example isActive to every item from your data when you received that. And then in ng-repeatshow button according to value of this field for your item. You can use native JavaScript functions as map or forEach to add this value.

For example:

  FetchDomainService.get(
    function (resp) {
      $scope.items = resp.map(function (item) {
        item.isActive = true;
        return item;
      });
    }
  );

And to show/hide your text - use this value isActive and AngularJS directives ng-show, ng-hide or ng-if.

<span ng-hide="item.isActive">Activate</span>
<span ng-show="item.isActive">Deactivate</span>

Demo: http://plnkr.co/edit/cYm0R8r4iFygk9A8iVPj?p=preview

answered Oct 20, 2015 at 10:57

ababashka

2,1011 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shekhar Khairnar · Accepted Answer · 2015-10-20 11:02:19Z

1

You need to try something like:

<button class="btn" ng-disabled = "domain.isActive">
     <span class="glyphicon glyphicon-pencil">{{domain.isActive ? 'btnName1' :'btnName2'}}</span>  
</button>

answered Oct 20, 2015 at 11:02

Shekhar Khairnar

2,7013 gold badges29 silver badges46 bronze badges

Comments

Prakash Bisht · Accepted Answer · 2015-10-28 06:21:58Z

1

You can get the answer here which is very nicely explain https://github.com/angular/angular.js/issues/5912

answered Oct 28, 2015 at 6:21

Prakash Bisht

2261 silver badge10 bronze badges

Collectives™ on Stack Overflow

how to Change button text in each row in angularjs

3 Answers 3

Demo: http://plnkr.co/edit/cYm0R8r4iFygk9A8iVPj?p=preview

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Demo: http://plnkr.co/edit/cYm0R8r4iFygk9A8iVPj?p=preview

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related