I have a table in html with multiple rows have some data format below
jobname | jobid | Action
sendemail | 34636 | Button(Name Retry)
sendereport | 35455 | Button(Name Retry)
In angular js controller I want to write a function when I will click on Retry button it will call some API call, I have written that one but what I need when I will click on Retry button it's button text will change to Retrying... How to uniquely identify each button in angular js controller
I have a table in html with multiple rows have some data format below
jobname | jobid | Action
sendemail | 34636 | Button(Name Retry)
sendereport | 35455 | Button(Name Retry)
In angular js controller I want to write a function when I will click on Retry button it will call some API call, I have written that one but what I need when I will click on Retry button it's button text will change to Retrying... How to uniquely identify each button in angular js controller
ng-repeat? Then you can specify an e.g. boolean attribute on the repeated items and use that to know which text to show. Would help if you showed relevant code tho.
– Arg0n
Commented
Apr 5, 2017 at 10:56
You can do it by using ng-class and in a simple way. This is your index.html
<!DOCTYPE html>
<html lang="en-US" ng-app="myApp">
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
.red{
color:red;
}
</style>
<body>
<div ng-controller="myCtrl">
<button ng-click="abc=1" ng-class="{red:abc>0}">Click me</button>
</div>
</body>
</html>
and this will be script.js
angular.module('myApp',[])
.controller('myCtrl',function($scope){
})
THere is no need to write special functions in controller to change color. ng-class provides inbuilt functionality.
I have also created a plunk https://plnkr.co/edit/Koh1m6?p=preview
you can use ng-repeat to show the data and when the button click you can change the name of that button.
assume this is your array
$scope.arr = [{"jobname":"sendemail","jobid":123, "Action":"btn1"},{"jobname":"sendReport","jobid":123, "Action":"btn2"},{"jobname":"sendWhatever","jobid":123, "Action":"btn3"}]
you can show the data in Dom using ng-repeat like this
<tr ng-repeat="item in arr">
<td>{{item.jobname}}</td>
<td>{{item.jobid}}</td>
<td><button ng-click="clickFunc(item)">{{item.Action}}</button></td>
</tr>
In the click, function pass the object as parameter and change the button value
$scope.clickFunc = function(item){
item.Action = "retry"
}
Demo
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.arr = [{"jobname":"sendemail","jobid":123},{"jobname":"sendReport","jobid":123},{"jobname":"sendWhatever","jobid":123}]
$scope.clickFunc = function(item){
item.Action = "retry"
}
})<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tr>
<td>jobname</td>
<td>jobid</td>
<td>Action</td>
<tr ng-repeat="item in arr">
<td>{{item.jobname}}</td>
<td>{{item.jobid}}</td>
<td><button ng-init="item.Action = 'btn'" ng-click="clickFunc(item)">{{item.Action}}</button></td>
</tr>
</table>
</div>You can use like below (Basic example during service call.):
$scope.buttonLabel = "Retry";
$scope.getServiceDealData = function () {
$scope.buttonLabel = "Retrying..";
yourDataService.getYourServiceData().then(function (data) {
$scope.dealData = data.deals;
$scope.buttonLabel = "Retry";
}).catch(function (data) {
$scope.errorMessage = "Oops! Something went wrong.";
$scope.buttonLabel = "Retry";
});
}