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

4

使用 CSS 类和ngClass这样做会更干净：

<span class="normal">The statement is </span>
<span ng-class="{warn:statement.IsTrue}">{{statement.IsTrue}}</span>

对 CSS 类 'normal' 和 'warn' 进行适当的定义。

或者，只需使用ngShow和 ngHide 来显示一个 HTML 块并隐藏另一个。大多数情况下，在 Angular 中，你操作一个模型，然后视图使用条件指令渲染它；您很少需要直接操作 HTML。

于 2013-05-31T05:43:00.463 回答
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 回答
2

我认为 adirective是实现您想要的更好的方法，因为您需要根据某个值生成 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>

我还创建了一个plunk供您查看。

于 2013-05-31T05:27:25.560 回答