Reputation: 43
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
Reputation: 226
You can get the answer here which is very nicely explain https://github.com/angular/angular.js/issues/5912
Upvotes: 1
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
Reputation: 2101
You can add some field for example isActive
to every item from your data when you received that. And then in ng-repeat
show 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>
Upvotes: 3