CODEWITHSUNDEEP
angularjs
Ussr11221122
Ussr11221122

Reputation: 43

how to Change button text in each row in angularjs

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.

Upvotes: 2

Views: 1223

Answers (3)

Prakash Bisht
Prakash Bisht

Reputation: 226

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

Upvotes: 1

Shekhar Khairnar
Shekhar Khairnar

Reputation: 2691

You need to try something like:

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

Upvotes: 1

ababashka
ababashka

Reputation: 2101

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

Upvotes: 3

Related Questions