angularjs newline 필터(다른 html 없음)

angularjs newline 필터(다른 html 없음)

변환하려고 \n합니다.br의 discriptions
Google Group에서의 이 토론에 대해 알아보겠습니다.

myApp.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
});

여기서의 설명에서는, 뷰에서 다음의 것을 사용하는 것도 추천합니다.

{{ dataFromModel | newline | html }}

의 것을 것 같습니다.html필터인데,은 필터라고 요.ng-bind-html여하하다

---

이것은 가 된다: ,, 것것문 regard regard regard regard regard regard regard regard. 문자열HTML)에서dataFromModel.HTML만 됩니다.br의 discriptions

예를 들어, 다음 문자열이 지정됩니다.

7 > > 5 。
「HTML」의 「HTML」의 「HTML」의...

출력:

While 7 &gt; 5<br>I still don't want html &amp; stuff in here...

이 일을 해낼 수 있는 방법이 있을까요?

은 html(html) a.m.m.m.m.m.m.m.m.m.만 실행할 수 .<preformated text>방법? 필터 사용이나 어떤 종류의 처리도 피할 수 있습니다.

다음 CSS를 가진 요소 내의 텍스트를 표시하기만 하면 됩니다.

<p style="white-space: pre;">{{ MyMultiLineText}}</p>

그러면 \n이 해석되어 새 행으로 표시됩니다.나한테는 잘 먹힌다.

다음은 jsFiddle의 예입니다.

새로운 디렉티브를 조작하는 대신에, 다음의 2개의 필터만을 사용하기로 했습니다.

App.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
})
.filter('noHTML', function () {
    return function(text) {
        return text
                .replace(/&/g, '&amp;')
                .replace(/>/g, '&gt;')
                .replace(/</g, '&lt;');
    }
});

그리고 나서, 내가 보기에, 나는 하나를 다른 것으로 파이프로 연결한다.

<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>

, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, , , 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다, 하다.\n'ng-ng-응-응-응'-응-응-응-응-응-응-응-응-응-응-응-응-응-응-응-응'

필터:

App.filter('newlines', function() {
  return function(text) {
    return text.split(/\n/g);
  };
});

및 html:

<span ng-repeat="line in (text | newlines) track by $index">
    <p> {{line}}</p>
    <br>
</span>

끝없는 문자열로 레이아웃을 파기하지 않으려면 사전 줄을 사용합니다.

<p style="white-space: pre-line;">{{ MyMultiLineText}}</p>

html을 Angular html을 해야 할 것 .newlines내가 은 관례에 것이다.no-html 디렉티브를 한 후 및 됩니다.html

<div no-html="data" post-filter="newlines"></div>

구현은 다음과 같습니다.

app.directive('noHtml', function($filter){
  return function(scope, element, attrs){
    var html = scope[attrs.noHtml];
    var text = angular.element("<div>").html(html).text();

    // post filter
    var filter = attrs.postFilter;
    var result = $filter(filter)(text);

    // apending html
    element.html(result);
  };
});

는 '우리'입니다.text 하여 HTML에 합니다.html한 후 method로 .text방법.두 메서드는 모두 Angular의 lite 버전의 jQuery에서 제공됩니다.

부분에서는 ''를 요.newline, , 필터, 필터, , 필터, 필터, 필터, 필터, 필터, 필터, 필터, 필터, 필터, .$filter★★★★★★★★★★★★★★★★★★.

http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview 에서 플런커를 확인해 주세요.

현재 ng-bind-html을 사용한 필터 업데이트는 다음과 같습니다.

myApp.filter('newlines', function () {
  return function(text) {
    return text.replace(/(&#13;)?&#10;/g, '<br/>');
  }
});

noHTML 필터는 필요 없게 되었습니다.

화이트 스페이스 솔루션의 브라우저 지원이 낮습니다.http://caniuse.com/ #search = tab-size

파티에는 조금 늦었지만 정의되지 않은 문자열이나 늘 문자열이 없는지 확인하기 위해 약간의 개선을 제안합니다.

예를 들어 다음과 같습니다.

.filter('newlines', function () {
    return function(text) {
        return (text) ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})

또는 (조금 더 조임)

.filter('newlines', function () {
    return function(text) {
        return (text instanceof String || typeof text === "string") ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})

언급URL : https://stackoverflow.com/questions/13964735/angularjs-newline-filter-with-no-other-html