如何在AngularJS中显示过滤器的计算结果？

Question

我写了一个应用程序来转换十进制值和negabinary之间。

http://dev.golightlyplus.com/playground/negabinary/

我写了一个自定义过滤器，所以我可以做

{{decimal | negabinary}} 

它是该代码..

var negabinaryApp = angular.module('negabinaryApp', []); 

negabinaryApp.filter('negabinary', function() { 

    return function (decimal) { 

     if (isNaN(decimal)) return "not a number"; 

     var negabinary = []; 
     var base = -2; 
     var remainder; 

     while(decimal != 0) { 

      remainder = decimal % base; 
      decimal = Math.ceil(decimal/base); 
      negabinary.push(remainder >= 0 ? remainder : -remainder); 
     } 

     return negabinary.reverse().join(''); 
    } 
}); 

我想什么，能够做的是也可以在页面上显示计算结果。

我可以通过while循环为每个循环创建一个计算数组。但是，我如何将它们绑定到HTML？或者有更好的方法去解决这个问题吗？

谢谢。

Answer 1

您的特定过滤器的实际功能是分心的问题的目的。为了简化，您的问题是：“我如何显示接受字符串的过滤器的输出并将其解析为HTML”？例如，

这将同样适用于您的情况，例如您将案例包装在<pre>中。

的关键，是将输出结合ng-bind-html：

<div ng-bind-html="decimal | negabinary"> 

下面是一个简单的（和无用）例如：

.filter("strongify", function(){ 
    return function(str){ 
    return "<strong>" + str + "</strong>"; 
    } 
}); 

可类似地使用：

<div ng-bind-html="name | strongify"> 

这是一个将文本分成<p>的段落：http://plnkr.co/edit/RN5TqwNRRjMjynwInNyn?p=preview

请注意，您还需要在输出上添加ngSanitize依赖项或以其他方式添加$sce.trustAsHtml。