Question

我需要在ng-click功能上使用字体真棒微调器更改按钮文本。

<input id="Button1" type="button" value="{{buttonText}}"  ng-click="Save()" />

我的脚本

app.controller("CateCtrl", function ($scope, $http) {
    $scope.buttonText = 'Save';
    $scope.Save = function () {
           $scope.buttonText = '<i class="fa fa-spinner fa-pulse"></i> Please wait';
        }); 
    });

它改变了文本，因为它是“请稍候”

不显示微调器图标。

Answer 1

使用ng-class

<button><i ng-class="{'fa fa-spinner fa-pulse' : loading}"></i></button>

单击按钮组

    app.controller("CateCtrl", function ($scope, $http) {
       $scope.buttonText = 'Save';
       $scope.Save = function () {
          $scope.loading = true;
       }); 
   });

Edit1：你可以在你的按钮标签中加入html。 Read

Answer 2

您无法使用类作为按钮名称，您执行此操作的方式会将按钮名称更改为<i class="fa fa-spinner fa-pulse"></i> Please wait，使用 ng-class 并尝试更改其图标。

Answer 3

以下是使用ng-if条件的解决方案。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<button>
  <i ng-click="Save()" ng-if="loading" class="fa fa-spinner fa-pulse"></i>
  <span ng-click="Save()" ng-if="!loading">Save</span>
</button>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    
       $scope.Save = function () {
          $scope.loading = !$scope.loading;
       }; 
    
});
</script>

</body>
</html>

Here is a working DEMO

如何在ng-click中使用微调器更改按钮文本

3 个答案: