加载图标变成控制器功能后的状态图标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

回答

相关问题