Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS: newline characters to paragraph elements

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. However I am wondering whether there is an "official" Angular way or just what the most elegant approach would be within the AngularJS context.

An Example

From:

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

to:

<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>

I can think of a number of ways to do this:

  1. Modify the text in the controller (though I prefer to avoid modifying my models)
  2. Using a directive, and generating paragraphs in a link function (seems overly cumbersome).
  3. Using a filter (my current favourite) to create an array to pipe into ng-repeat
like image 803
George Thomas Avatar asked Jun 21 '13 15:06

George Thomas


3 Answers

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>
like image 103
George Thomas Avatar answered Nov 05 '22 05:11

George Thomas


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/

like image 26
Brian Lewis Avatar answered Nov 05 '22 04:11

Brian Lewis


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

 white-space: pre-line;
like image 2
Walter Palacios Avatar answered Nov 05 '22 04:11

Walter Palacios