Question

我正在尝试为ng-class设置一个值，但是当表达式的计算结果为true时，它首次加载，然后ng-class中的两个类都应用于标记。
我正在使用font-awesome并在两个图标之间切换。以下是ng-class的代码：

 <div class="checkLabel checkbox handPointer" ng-click="test = !test">
     <i class="fa fa-fw fa-lg" ng-init="test = false" ng-class="test ? 'fa-check-square-o' : 'fa-square-o'"></i>
     <label>test</label>
 </div>

当我加载页面时，有一个更新测试变量的http请求。如果测试变量的计算结果为false，则没有问题。但是，如果测试变量的评估结果为真，那么＆＃39; fa-square-o＆＃39;和＆＃39; fa-check-square-o＆＃39;应用于html元素的类。当我在浏览器上检查元素时，我看到了这一点。

<i class="fa fa-fw fa-lg fa-square-o fa-check-square-o" ng-init="test = false" ng-class="test ? 'fa-check-square-o' : 'fa-square-o'"></i>

Angular HTTP Request

var promise = $http.getData("URL");
promise.then(function(result) {
     // use the result
     $scope.test = true;
}

另一个注意事项是，当我点击div时，它会切换测试变量（这确实有效）。因此，当页面加载，如果测试变量的计算结果为true，那么它将显示错误的图片（fa-square-o），因为这两个类都将被应用，当我第一次点击div时它不会改变图片，因为它将变量更改为false并且ng-class正常工作（显示fa-square-o）。然后，当我再次点击它时，它会将测试更改为真，并显示正确的图片（fa-check-square-o）。

任何帮助将不胜感激！

编辑：

我发现了这个bug的一个奇怪的方面。这段代码包含在一个角度指令中，根据选择的选项卡，该指令将是可见的。为简单起见，假设代码在选项卡A上，并且还有另一个选项卡B.当选择选项卡A时，将调用promise。在选项卡A上刷新页面时会发生此错误。在选项卡B上刷新页面，然后选择选项卡A时，将显示正确的图像。我希望我能解释得很好，如果没有，请随时要求澄清。

更新：

我不确定这是否真的是一个解决方案，但我已经让它将我的初始值更改为true。就像我说的那样，我不知道为什么会这样，但是当我把它更改为真正开始时，正确的图片会显示在加载上，点击div时没有任何问题。

Answer 1

我认为如果您没有使用非常古老的Angular版本，那么您的引号就会出错。当你尝试时会发生什么：

 <div class="checkLabel checkbox handPointer" ng-click="test = !test">
     <i class="fa fa-fw fa-lg" ng-init="test = false" ng-class="test ? 'fa-check-square-o' : 'fa-square-o'"></i>
     <label>test</label>
 </div>

如果不起作用，请查看此帖子：AngularJS toggle class using ng-class

Answer 2

你试过吗？

<i class="fa fa-fw fa-lg" ng-init="test=false" ng-class="{'fa-check-square-o': test, 'fa-square-o': !test}"></i>

Answer 3

这个问题使我发疯。您正在正确使用指令。指令中必须存在一些竞赛条件错误。

我使用两种不同的方法修复了它。我更喜欢＃2。

将一个$ timeout（）添加到promise回调中，在此您将变量的值设置为首次加载时为true。 1秒为我工作。不过，这似乎有点骇人听闻。
```
MyEnum
```
不要使用.then(function(){ $timeout(function(){ $scope.test = true; }, 1000); }指令。而是在ng-class属性中使用插值。这不违反Angular规则。
```
class
```

P.S。我相信您已经过了自己的生活，所以这是给遇到此奇怪问题的其他人的

当页面首次加载时，Ng-Class会导致两个类处于活动状态

3 个答案: