AngularJS: символы новой строки для элементов абзаца

в Angular мне нужно создать ряд элементов абзаца из блока текста, содержащего символы новой строки?

Я могу придумать несколько способов сделать это. Однако мне интересно, есть ли" официальный " угловой способ или просто какой самый элегантный подход будет в контексте AngularJS.

Пример

From:

образцами Lorem ipsum боль сидеть Амет, проектами работающих вы где для этой статьи элит. n
СЭД диам nonummy жилая площадь euismod tincidunt laoreet ут долор. n
Эрат и Magna aliquam volutpat. Ут фирмы wisi еним объявление veniam миним.

в:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore.</p>
<p>Magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>

Я могу придумать несколько способов сделать это:

  1. изменить текст в контроллере (хотя я предпочитаю избегать изменения моих моделей)
  2. использование директивы и создание абзацев в функции ссылки (кажется слишком громоздким).
  3. используя фильтр (мои любимые) чтобы создать массив для передачи в ng-repeat
7
angularjs javascript

3 ответов

лучшим решением, которое я мог придумать, было создать фильтр:

angular.module('myApp').
filter('nlToArray', function() {
  return function(text) {
      return text.split('\n');
  };
});

это блок текста и создает новый элемент массива для каждого пункта.

затем этот массив можно подключить к директиве ng-repeat:

<p ng-repeat="paragraph in textBlock|nlToArray track by $index">{{paragraph}}</p>
13
var myApp = angular.module('myApp', ['ngSanitize']);
myApp.controller('myCtrl', function($scope){
    $scope.myText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\nSed diam nonummy nibh euismod tincidunt ut laoreet dolore.\nMagna aliquam erat volutpat. Ut wisi enim ad minim veniam."
});
myApp.filter('nl2p', function () {
    return function(text){
        text = String(text).trim();
        return (text.length > 0 ? '<p>' + text.replace(/[\r\n]+/g, '</p><p>') + '</p>' : null);
    }
});

http://jsfiddle.net/moderndegree/934aZ/

5

это глупый хак, но он работает вокруг абзацев, заключенных вокруг других тегов, таких как <p><h3>:

text = '<p>' + text.replace(/[\r\n]+/g, '</p><p>') + '</p>';
// delete blank lines
text = text.replace(/<p>\s*?<\p>/g, '');
// delete erroneous paragraph enclosed tags
text = text.replace(/<p>\s*?(<.+?>)\s*?(.+?)\s*?(<\/.+?>)\s*?<\/p>/g, '');
0