加載圖標變成控制器功能後的狀態圖標AngularJS

如何在控制器功能執行過程中更改我的視圖中的圖標？
在我的功能開始時，圖標應該是一個轉輪，以表明狀態正在加載並正在工作。

然後執行後狀態是真或假。這應該用某種圖標表示。 Let's拿這個例子簡單：
狀態真：
狀態錯誤：加載圖標變成控制器功能後的狀態圖標AngularJS

我試圖改變與ng-bind-html="statusIcon"屬性在我的模板，在我的控制造成的insecure-error$scope.statusIcon = <i class="fa fa-check-square-o"></i>。

也許你們可以幫我解決這個問題。

來源

2016-02-05 MegaCleptomaniac

你能否把一個plunkr加快進程幫助你？ –

你可以只用NG-展示和NG-隱藏有條件地顯示一個圖像或其他：

HTML：

<p>Status: 
    <span ng-show="loading"><i class="fa fa-check-square-o"></i></span> 
    <span ng-hide="loading"><i class="fa fa-x-or-whatever-it-is"></i></span> 
    </p>

控制器：

$scope.loading = false; 
    function getData() { 
    $scope.loading = true; 
    $http.get(someUrl).then(function(data) { 
     $scope.data = data.data; 
     $scope.loading = false; 
    }); 
    }

來源

2016-02-05 14:45:04

安全使用ng-bind-html ，您還需要使用$sce。

幸運的是，在這種情況下，不需要使用ng-bind-html。（這是一般真實的，除非你正在處理一個包含HTML用戶輸入儘可能多的，儘量保持你的HTML在你的模板，而不是在你的控制器。）

在你的控制器：$scope.statusIcon = "check";

在您的模板：

<i class="fa" ng-class="{ 
    'fa-check-square-o': statusIcon == 'check', 
    'fa-spinner':  statusIcon == 'spinner', 
    'fa-whatever':  statusIcon == 'etcetera' 
}"></i>

（或者，如果你想成爲超級懶的話，你可以只插類名本身，一拉<i class="fa {{statusIcon}}">）

來源

2016-02-05 14:45:56

加載圖標變成控制器功能後的狀態圖標AngularJS

回答

相關問題