web-dev-qa-db-ja.com

ngClassでAngularJSフィルターを使用するにはどうすればよいですか？

私は現在AngularJSを学び、チュートリアルで遊んでいます。

チュートリアルのサンプルフィルターを変更して、文字列を返します。

angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? 'true-class' : 'false-class';
  };
});

そして、それをngClassで次のように使用したいと思います。

{{phone.trueVal  | checkmark}} <i ng-class="{{phone.trueVal  | checkmark }}"></i>
{{phone.falseVal | checkmark}} <i ng-class="{{phone.falseVal | checkmark }}"></i>

結果は次のとおりです。

true-class <i class="false-class">
false-class <i class="false-class">

さて、単純なビューの場合、フィルターは期待どおりに機能しますが、ngClassでは機能しないのはなぜですか？ ngClass（およびngSrcなど）でフィルター処理された値を使用する正しい方法は何でしょうか。

angularjsfilterangularjs-filter
19
ioleo

あなたの場合、あなたはng-classの代わりにclassを使うべきです。なぜならあなたはhtmlに直接クラス名をレンダリングするからです評価なし。

<div ng-controller="MyCtrl">
   <i class="{{phone.trueVal  | checkmark }}">{{phone.trueVal  | checkmark}}</i>
   <i class="{{phone.falseVal | checkmark }}">{{phone.falseVal | checkmark}}</i>
</div>

[〜＃〜]デモ[〜＃〜]

24
Khanh TO

これは私のために働いた。 AngularJSをじっと見つめていたので、この質問は2年前のものであるため、更新の一部として機能が追加されたかどうかはわかりません。

ng-class="{ 'has-error': (login.form | validField:'username') }"

括弧を追加した後、それは機能しました。

14
Jason