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
Share Improve this question edited Apr 5, 2017 at 10:54 Sachila Ranawaka 41.5k8 gold badges61 silver badges87 bronze badges asked Apr 5, 2017 at 10:53 DevDev 4231 gold badge11 silver badges29 bronze badges 1-
Are the rows in a
ng-repeat? Then you can specify an e.g.booleanattribute 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
3 Answers
Reset to default 3You 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";
});
}