angularjs点击更改按钮文本

时间:2017-04-05 10:53:22

标签: javascript angularjs

我在html中有一个表,其中多行有一些数据格式

scope

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

3 个答案:

答案 0 :(得分:3)

您可以使用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>

这将是script.js

angular.module('myApp',[])
.controller('myCtrl',function($scope){

})

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

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

答案 1 :(得分:2)

您可以使用General来显示数据,点击按钮时可以更改该按钮的名称。

假设这是你的数组

ng-repeat

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

$scope.arr = [{"jobname":"sendemail","jobid":123, "Action":"btn1"},{"jobname":"sendReport","jobid":123, "Action":"btn2"},{"jobname":"sendWhatever","jobid":123, "Action":"btn3"}]

在单击中,函数将对象作为参数传递并更改按钮值

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

演示

&#13;
&#13;
$scope.clickFunc = function(item){
  item.Action = "retry"
}
&#13;
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"
}
})
&#13;
&#13;
&#13;

答案 2 :(得分:0)

您可以使用如下(服务电话中的基本示例。):

&#13;
&#13;
$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";
        });
    }
&#13;
&#13;
&#13;