在角度http请求中将按钮上的css类从«fa fa-search»更改为«fa fa-refresh fa-spin»？

Question

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

更新

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

字体很棒的字体在我的网络项目中。

在我的 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 请求，我需要在按下按钮时更改图标类。

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

$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

正如我在评论中所建议的那样，您应该尝试将必要的类 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>

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

当您来自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 类以避免一次又一次地添加和删除它。另外，使用requested == false 到!requested 和requested == true 到requested。