Ng-Classは、ページが最初にロードされるときに2つのクラスをアクティブにします。

Question

ng-classの値を設定しようとしていますが、式がtrueと評価された場合にng-タグに
私はfont-awesomeを使い、2つのアイコンを切り替えています。

<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と評価された場合、問題はありません。しかし、テスト変数がtrueと評価された場合、 'fa-square-o'と 'fa-check-square-o'の両方が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> 

角度HTTPリクエスト

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を示しています）。次に、それを2回クリックすると、テストが真となるように変更され、正しい画像（fa-check-square-o）が表示されます。

ご協力いただければ幸いです！

編集：

私はこのバグの奇妙な側面を発見しました。このコードは角度指示文に含まれており、選択されたタブに応じてこの指示文が表示されるかどうかは異なります。簡単にするために、コードはタブAにあり、別のタブBがあると仮定します。約束は、タブAが選択されたときに呼び出されます。ページがタブAでリフレッシュされると、このバグが発生します。タブBでページをリフレッシュし、タブAを選択すると、正しいイメージが表示されます。私はこれをうまく説明してくれれば幸いです。

UPDATE：

これはまさにソリューションである場合、私はわからないが、私は私が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>