Javascript angularjs单击时更改按钮文本_Javascript_Angularjs

Javascript angularjs单击时更改按钮文本

javascript angularjs

Javascript angularjs单击时更改按钮文本,javascript,angularjs,Javascript,Angularjs,我有一个html表格，有多行，下面有一些数据格式 jobname | jobid | Action sendemail | 34636 | Button(Name Retry) sendereport | 35455 | Button(Name Retry) 在angular js控制器中，我想写一个函数，当我点击重试按钮时，它会调用一些API调用，我已经写了这个函数，但当我点击重试按钮时，它的按钮文本将更改为重试。。。如何唯一识别angular js controller中的每

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

jobname     | jobid | Action
sendemail   | 34636 | Button(Name Retry)
sendereport | 35455 | Button(Name Retry)

在angular js控制器中，我想写一个函数，当我点击重试按钮时，它会调用一些API调用，我已经写了这个函数，但当我点击重试按钮时，它的按钮文本将更改为重试。。。

如何唯一识别angular js controller中的每个按钮

您可以使用

ng repeat

显示数据，当按钮单击时，您可以更改该按钮的名称

假设这是您的数组

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

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

演示

角度模块（“应用程序”，[]） .controller（“ctrl”，函数（$scope）{ $scope.arr=[{“jobname”：“sendemail”，“jobid”：123}，{“jobname”：“sendReport”，“jobid”：123}，{“jobname”：“sendWhatever”，“jobid”：123}] $scope.clickFunc=函数（项）{ item.Action=“重试” } })


工作名称
若比德
行动
{{item.jobname}
{{item.jobid}
{{item.Action}

您可以使用

ng repeat

显示数据，当按钮单击时，您可以更改该按钮的名称

假设这是您的数组

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

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

演示


工作名称
若比德
行动
{{item.jobname}
{{item.jobid}
{{item.Action}

您可以像下面这样使用（服务呼叫期间的基本示例）：

$scope.buttonLabel=“重试”；
$scope.getServiceDealData=函数（）{
$scope.buttonLabel=“重试…”；
yourDataService.getYourServiceData（）.then（函数（数据）{
$scope.dealData=data.deals；
$scope.buttonLabel=“重试”；
}).catch（函数（数据）{
$scope.erromessage=“哎呀！出了点问题。”；
$scope.buttonLabel=“重试”；
});
}

您可以像下面这样使用（服务呼叫期间的基本示例）：

$scope.buttonLabel=“重试”；
$scope.getServiceDealData=函数（）{
$scope.buttonLabel=“重试…”；
yourDataService.getYourServiceData（）.then（函数（数据）{
$scope.dealData=data.deals；
$scope.buttonLabel=“重试”；
}).catch（函数（数据）{
$scope.erromessage=“哎呀！出了点问题。”；
$scope.buttonLabel=“重试”；
});
}

您可以通过使用ng类并以一种简单的方式来完成。这是你的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>

不需要在控制器中编写特殊函数来更改颜色。ng类提供内置功能

我还创建了一个plunk

您可以通过使用ng类并以一种简单的方式来完成。这是你的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>

不需要在控制器中编写特殊函数来更改颜色。ng类提供内置功能

我还创建了一个plunk

是否重复

ng中的行？然后，您可以在重复项上指定一个属性，例如布尔值
，并使用该属性知道要显示的文本。如果您显示相关代码，则会有所帮助。ng repeat
中的行是否重复？然后，您可以在重复项上指定一个属性，例如布尔值
，并使用该属性知道要显示的文本。如果您显示了相关代码tho，会有所帮助。我们可以在删除“Action”：“btn1”“Action”：“btn2”等之后执行此操作吗。。从$scope.arr开始并执行此操作？在这种情况下，我们不能但此方法有什么问题？我从mongodb获取所有数据，我没有从数据库获取“操作”：“btn1”。在这种情况下，您可以使用ng init
检查更新的答案。我们可以在删除“操作”后执行此操作吗？：“btn1”“操作”：“btn2”等等。。从$scope.arr开始并执行此操作？在这种情况下，我们不能，但这种方法有什么问题？我从mongodb获取所有数据，但我没有从数据库获取“操作”：“btn1”。在这种情况下，您可以使用ng init
检查更新的答案哪里是html？哪里是html？