angularjs单击更改按钮文本
[英]angularjs change button text on click
问题描述
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 在angular js控制器中，我想编写一个函数，当我单击Retry按钮时它将调用一些API调用，我已经编写了一个函数，但是当我单击Retry按钮时我需要的是按钮文本将变为Retrying ...如何在angular js控制器中唯一标识每个按钮
3 个解决方案
解决方案1
3 2017-04-05 11:11:35
You can do it by using ng-class and in a simple way. 您可以使用ng-class并以一种简单的方式来做到这一点。 This is your index.html 这是您的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
解决方案2
2 已采纳 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. 您可以使用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>
解决方案3
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"; }); }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.