3

Angular フィルターを使用して、html に条件付きフィルター処理を適用しようとしています。

JS ファイルでフィルター処理:

angular.module('myFilter', []).filter('conditionFormat', function () {
    return function (input) {
        return (input 
            ? '<span style="color:#008000; font-weight:bold;">The statement is true</span>' 
            : '<span style="color:#008000; font-weight:bold;">The statement is <span style="color: #FF0000;">NOT</span> true</span>');
    };
});

HTML コード:

<td>
  <span ng-bind-html="{{statement.IsTrue | conditionFormat}}"></span>
</td>

これの出力は文字通り次のとおりです。

<span style="color:#008000; font-weight:bold;">The statement is true</span>

戻り文字列を HTML でエンコードする方法はありますか? またはおそらくこれを達成する別の方法ですか？

前もって感謝します。

4

3 に答える 3

2

directiveある値に基づいてhtmlを生成する必要があるため、目的を達成するためのより良い方法だと思いますが、フィルターの最適な使用法は、出力をフォーマットすることです。

以下に例を示します。

JS

angular.module('myDir', []).
  directive('truthful', function() {
    return function(scope, element) {
      function updateUi() {
        if (scope.isTrue) { //NOTE: change to whatever you have in your scope
          element.html('<span style="color:#008000; font-weight:bold;">The statement is true</span>');
        }
        else {
          element.html('<span style="color:#008000; font-weight:bold;">The statement is <span style="color: #FF0000;">NOT</span> true</span>');
        }
      }

      scope.$watch('isTrue', updateUi);
    };
  });

HTML

<span truthful></span>

私はまた、あなたが見てみるためにプランクを作成しました.

于 2013-05-31T05:27:25.560 に答える
2

ng-switch はうまく機能しているようです。

HTML:

<td>                                      
   <div ng-switch on="statement.IsTrue">
      <div ng-switch-when="true"><span style="color:#008000; font-weight:bold;">The statement is true</span></div>
      <div ng-switch-when="false"><span style="color:#008000; font-weight:bold;">The statement is <span style="color: #FF0000;">NOT</span> true</span></div>
      <div ng-switch-default><span style="color: rgb(255, 0, 0); font-weight: bold;">No answer selected</span></div>
    </div>                                            
</td>
于 2013-05-31T04:31:47.830 に答える