anglejsを使用して文字列で使用される区切りのパイプにスタイルを適用するにはどうすればよいですか？

私は正規表現を使用しましたが、文字列に使用された|を区切りたいので、メッセージにspanタグを追加して、スタイルを適用しません。どのようにAngularjsのアプローチを使用してこのタスクを達成するための任意のアイデア？anglejsを使用して文字列で使用される区切りのパイプにスタイルを適用するにはどうすればよいですか？

ctrl.js

var data = "[2017-07-12T12:38:36-04:00]|zldssd255|info|<n/a>|[infra.actorRouter] Processing message from topic UEQ: 216014da-b849-4a1d-8232-3629e58338ce { partition: 0, offset: 12081530 }" 

$scope.event = []; 
var message = data.replace(/\|/g, '<span class="pipe">|</span>'); 
$scope.event.push({ 
    value: message 
});

のmain.css

.pipe { 
    width: 1em; 
    color: white; 
    display: inline-block; 
    text-align: center; 
}

出典

2017-07-12 hussain

**実行可能** [mcve]を入力してください。注意：あなたは '{{}}'や 'ng-bind'を使ってhtmlを挿入することはできません – charlietfl

私はこの質問には、角度のアプローチが必要であることはよく分かりません。 CSSを使用してこれを行うことができます。

あなたのマークアップ：

<div id="pipe"></div>

あなたのCSS：

#pipe:before { 
    width: 1em; 
    color: black; 
    display: inline-block; 
    text-align: center; 
    content: '/'; 
}

出典

2017-07-12 18:42:32

私たちはスパンを動的に追加していますので、DOMの一部である' span'はありません。それは区切られたスタイルにすることができるように 'スパン'。あなたの場合、 'div'は何ですか？ – hussain

動的に追加されるかどうかは関係ありません。この場合、マークアップを無視して、このCSSクラスを使用してください。追加しているスパンから実際のパイプを削除する必要もあります。 –

IDが指定された場所にマークアップがないと私が何か不足している可能性があります – hussain

これはAngularJSとは何の関係もありません。あなたのCSSが適用されている、それはHTMLがあるため、あなたの<n/a>で正しく表示されるだけのことだ：

<body> 
    [2017-07-12T12:38:36-04:00]<span class="pipe">|</span>zldssd255<span class="pipe">|</span>info<span class="pipe">|</span> 
    <n a=""><span class="pipe">|</span>[infra.actorRouter] Processing message from topic UEQ: 216014da-b849-4a1d-8232-3629e58338ce { partition: 0, offset: 12081530 }</n> 
</body>

あなたがそれらをエスケープする必要があります。あなたのメッセージに<と>または類似のものを使用してください。

出典

2017-07-12 19:07:34 cst1992

'n/a'は値が文字列で利用できないことを意味します。私は同じ問題を参照してください – hussain

何でも、それはマークアップを壊しています。 – cst1992

私は解決メッセージの形式を尋ねる理由を知っていることを知っている – hussain

anglejsを使用して文字列で使用される区切りのパイプにスタイルを適用するにはどうすればよいですか？

答えて

関連する問題