AngularJS: newline characters to paragraph elements

Question

Within Angular, I need to generate a series of paragraph elements from a block of text containing newline characters?

I can think of a couple of ways to do this. Ho

Answer 1

This is a silly hack, but it works around paragraphs being enclosed around other tags, such as <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, '$1$2$3');

Answer 2

The best solution I could think of was to create a filter:

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

This takes a block of text and creates a new array element for each paragraph.

This array can then be plugged into an ng-repeat directive:

<p ng-repeat="paragraph in textBlock|nlToArray track by $index">{{paragraph}}</p>

Answer 3

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/

Answer 4

You might solve this with css property and use {{text}} into p html element

 white-space: pre-line;