Helpex - Trao đổi & giúp đỡ Đăng nhập
13

Cách tốt nhất để bắt và định dạng "\ n \ n" bên trong văn bản được chuyển từ máy chủ để hiển thị ngắt dòng là gì? Fiddle ở đây: http://jsfiddle.net/nicktest2222/2vYBn/

$scope.data = [{
    terms: 'You agree to be bound be the terms of this site. \n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus lectus ac nunc malesuada, fringilla feugiat nibh rhoncus. Vestibulum adipiscing mi in est consectetur, vitae facilisis nulla tristique. Nam eu ante egestas, ultricies tellus eu, suscipit neque.\n\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et ligula non tellus semper iaculis eget vestibulum metus. Nunc aliquam eros sit amet sapien posuere, ac hendrerit risus ultricies. Vivamus nec enim sed eros placerat pulvinar a quis dui.',
    agreed: false
}];
13 hữu ích 0 bình luận 22k xem chia sẻ
6

Bạn có thể sử dụng chỉ thị ngBindHtmlUnsafe , vớiterms: '... <br/><br/>...'

<p ng-bind-html-unsafe='data[0].terms'></p>

Bạn có thể gửi html tới AngularJS hoặc gửi chuỗi bằng \nvà thay thế nó bằng <br/>trong bộ điều khiển của AngularJS. Dù bằng cách nào cũng nên hoạt động. Hy vọng nó giúp.

Demo

6 hữu ích 0 bình luận chia sẻ
17

Bạn cũng có thể sử dụng một bộ lọc tùy chỉnh để thay thế \ncho <br>.

<p ng-bind-html-unsafe="data[0].terms | nl2br"></p>

Và bộ lọc.

angular.module('myApp', [])
  .filter('nl2br', function(){
      return function(text) {
           return text ? text.replace(/\n/g, '<br>') : '';
      };
});

** CHỈNH SỬA / CẬP NHẬT - 2014-12-10 **

Vì các phiên bản mới của Angular đã loại bỏ ng-bind-html-unsafenên @Tamlyn nên câu trả lời là câu trả lời tốt nhất. Tôi chỉ thay đổi cách $sceđược đưa vào hàm với mục đích tốc độ.

HTML

<p ng-bind-html="data[0].terms | nl2br"></p>

JS

.filter('nl2br', ['$sce', function ($sce) {
    return function (text) {
        return text ? $sce.trustAsHtml(text.replace(/\n/g, '<br/>')) : '';
    };
}]);

jsFiddle

17 hữu ích 2 bình luận chia sẻ
12

Đã xóa Angular 1.2 ng-bind-html-unsafenên đây là giải pháp được cập nhật.

HTML:

<p ng-bind-html="data[0].terms | nl2br"></p>

Và JS:

.filter('nl2br', function ($sce) {
    return function (text) {
        return text ? $sce.trustAsHtml(text.replace(/\n/g, '<br/>')) : '';
    };
})
12 hữu ích 1 bình luận chia sẻ
6

Bạn có các tùy chọn sau:

  • sử dụng prethẻ và giữ\n
  • sử dụng white-space:prequy tắc css và giữ\n
  • thay thế \nbằng <br>thẻ như @sza cung cấp.
6 hữu ích 1 bình luận chia sẻ
2

Nếu 'văn bản' là null, nó sẽ trả về một lỗi, tôi đã thêm:

.filter('nl2br', function(){
    return function(text){
        return text?text.replace(/\n/g, '<br/>'):'';
    };
});
2 hữu ích 0 bình luận chia sẻ
0

Bạn có thể tạo một bộ lọc đơn giản sẽ chia chuỗi của bạn thành các đoạn:

.filter('lines', function() {
    return function(text) {
      return angular.isString(text) ? text.split(/\n/g) : text;
    }
  })   

Và sử dụng nó trong chế độ xem để hiển thị chúng:

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

Không cần thiết bind-html-unsafe.

Xem điều này hoạt động trong đoạn mã:

Hiển thị đoạn mã

Đây không phải là ý tưởng của tôi nhưng tôi không thể tìm thấy nguồn ngay bây giờ

0 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ javascript json angularjs , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading