angularjs点击更改按钮文字

I have a table in html with multiple rows have some data format below

我有一个html表，下面有多行数据格式

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

在角度js控制器中我想编写一个函数，当我点击重试按钮它会调用一些API调用，我已经写了一个，但是当我点击重试按钮时我需要它的按钮文本将改为重试...如何唯一地识别角度js控制器中的每个按钮

3 个解决方案

#1

you can use ng-repeat to show the data and when the button click you can change the name of that button.

您可以使用ng-repeat显示数据，单击按钮时可以更改该按钮的名称。

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

您可以使用像这样的ng-repeat在Dom中显示数据

<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>

#2

You can do it by using ng-class and in a simple way. This is your index.html

您可以使用ng-class以简单的方式完成此操作。这是你的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

这将是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.

这不需要在控制器中编写特殊功能来改变颜色。 ng-class提供内置功能。

I have also created a plunk https://plnkr.co/edit/Koh1m6?p=preview

我还创建了一个插件https://plnkr.co/edit/Koh1m6?p=preview

#3

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";
        });
    }

#1