angularjs change button text on click
Question
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
3 answers
solution1
3 2017-04-05 11:11:35
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.com/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
solution2
2 ACCPTED 2017-04-05 10:59:57
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.com/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>
solution3
0 2017-04-05 11:09:32
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"; }); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.