2017-05-22 3 views
0

私はいくつかの自動生成されたhtmlコードを使って、私のangularJSアプリケーションのテキストを強調表示しています。 HTMLコードを生成する行は、このいずれかになります。HTML文字列をHTMLとして表示

var replaced = original.replace(regEx, '<span style="background-color: red;">' + replacing + '</span>'); 
line[key + 'HL'] = replaced; 

しかし、テンプレート

<div><p>{{line.codeHL ? line.codeHL : line.code}} {{line.price}}</p></div> 

でこれを書いては、このことを示しています

<span style="background-color: red;">GD5AU211</span> 102€ 

どのように私は内部のhtmlコードの評価を強制することができます文字列?

また、私は理由のためdocument.getElementById()を使用できないとしましょう。

答えて

3

ようcustフィルタを作成ng-bing-html

<div><p> 
     <div ng-bind-html="line.codeHL ? line.codeHL : line.code | cust"> 
     </div> {{line.price}} 
</p></div> 

を使用innerHTML

<div><p> 

    <div [innerHTML]="line.codeHL ? line.codeHL : line.code"> 
    </div> {{line.price}} 

</p></div> 

を使用し、その後、角度4を使用している場合、このリンクを参照してください。 AngularJS : Insert HTML into view

あなたは、これが役立つだろう$sce.trustAsHtml()

希望を使用して、信頼できるデータとしてHTMLを定義する必要がビューにHTMLの挿入を有効にするには:これは、あなたが求めるものをかもしれません。

+0

すべきP4xを@ – p4x

0

あなたは、角度1を使用しているならば、今、この

.filter('cust',function($sce){ 
    return function(html){ 
    return $sce.trustAsHtml(html) 
    } 
}) 
+0

私はそれが基本的に同じことをするので、あなたがあまりにもうまくいくと仮定 – p4x

+0

によありがとう! –

+0

@Parantap Parasharソリューションは非常に働いていた更新の答えをチェックしてください。はい、それはあなたのソリューションを – p4x

0

HTMLの前にテキストとして表示する必要がある<xmp>タグを追加します。

var replaced = original.replace(regEx, '<span style="background-color: red;"><xmp>' + replacing + '</xmp></span>'); 
関連する問題