在 angular http 请求中，在按钮上将 css class 从 «fa fa-search» 更改为 «fa fa-refresh fa-spin»？

Question

我正在用 ASP.NET、MVC5、HTML5 和 AngularJS 开发一个网站。

已更新

我在 Chrome 控制台中没有警告。

font-awesome 字体在我的 web 项目中。

在我的 web.config 中有这个：

<system.webServer>
    <staticContent>
        <remove fileExtension=".woff" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
        <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>

我有一个函数可以发出 Angular 的 $http 请求，我需要在按下按钮时更改图标 class。

目前，在我的 angular 控制器中，我有这个：

$scope.requested = false; // Initial value: false.

$scope.search = function (model) {
    $scope.requested = true; // When the function is called.

    $http({
        method: "POST",
        url: DFJB.systempath + "api/getdata",
        data: model
    }).success(function (data, status, headers, config) {
        $scope.requested = false; // When the request is completed.
        console.log(data);  
    }).error(function (data, status, headers, config) {
        console.log("Error: " + status);
    });
};

HTML5:

<button class="btn btn-primary" data-ng-disabled="frmModel.$invalid" type="submit">
    <i data-ng-class="{'fa fa-search': requested == false, 'fa fa-refresh fa-spin': requested == true}"></i>
    Search
</button>

但是，它无法正常工作。

当函数被调用时，图标的外观会发生变化：

请求完成后，图标变回不正确的外观：

视觉上的愿望：

有什么解决这个问题的建议吗？

谢谢。

Answer 1

如果您的 font-awesome 库中的字体文件未正确加载到浏览器中，就会发生这种情况。您应该会在浏览器的控制台中看到错误。

如果您正在使用下载的库，请评论它们并尝试直接从云中使用，如此处所示http://fontawesome.io/get-started/

更新:

此外，您能否尝试像这样更新您的代码：

<button class="btn btn-primary" data-ng-disabled="frmModel.$invalid" type="submit">
    <i class="fa" data-ng-class="{'fa-search': !requested, 'fa-refresh fa-spin': requested}"></i>
    Search
</button>

始终添加fa class以避免一次又一次地添加和删除它。此外，使用 requested == false 到 !requested 和 requested == true 到 requested。

Answer 2

首先你应该确保font-awesome加载。见 page source.

并且您的表单名称应该是 frmModel，例如：

<form name="frmModel" data-ng-submit="search()">

      <input type="text" data-ng-model="userName" required>
      <button type="submit" class="btn btn-primary" data-ng-disabled="frmModel.$invalid">
           <i class="fa" data-ng-class="{'fa-search': !requested, 'fa-refresh fa-spin': requested}"></i>

           Search
      </button>
    </form>

See PLUNKER WORKING DEMO

Answer 3

正如我在评论中所建议的那样，您应该尝试将必要的 class fa 移至 class，因为无论 requested 值如何都需要它。

此外，您可以为 ng-class 尝试以下语法：

<button class="btn btn-primary" data-ng-disabled="frmModel.$invalid" type="submit">
    <i class="fa" data-ng-class="requested? 'fa-refresh fa-spin': 'fa-search'"></i>
    Search
</button>

在 angular http 请求中，在按钮上将 css class 从 «fa fa-search» 更改为 «fa fa-refresh fa-spin»？

Changing css class from «fa fa-search» to «fa fa-refresh fa-spin» on a button, in angular http request?

twitter-bootstrap

angularjs

asp.net-mvc-5

font-awesome-4