Bảo toàn ngắt dòng trong angularjs

Tôi đã thấy câu hỏi SO này .

Mã của tôi thay vì ng-bind="item.desc"sử dụng {{item.desc}}vì tôi có ng-repeattrước đây.

Mã của tôi:

<div ng-repeat="item in items">
  {{item.description}}
</div>

Mô tả mục chứa \ncác dòng mới không được hiển thị.

Làm thế nào để {{item.description}}hiển thị các dòng mới dễ dàng giả định rằng tôi có ng-repeatở trên?

Dựa trên câu trả lời của @pilau - nhưng với một sự cải tiến mà ngay cả câu trả lời được chấp nhận cũng không có.

<div class="angular-with-newlines" ng-repeat="item in items">
   {{item.description}}
</div>

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-wrap;
}

Điều này sẽ sử dụng dòng mới và khoảng trắng như đã cho, nhưng cũng phá vỡ nội dung ở ranh giới nội dung. Thông tin thêm về tài sản không gian trắng có thể được tìm thấy ở đây:

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Nếu bạn muốn ngắt dòng mới, nhưng cũng thu gọn nhiều khoảng trắng hoặc khoảng trắng đi trước văn bản (rất giống với hành vi trình duyệt ban đầu), bạn có thể sử dụng, như @aaki đề xuất:

white-space: pre-line;

So sánh tốt các chế độ kết xuất khác nhau: http://meyerweb.com/eric/css/tests/white-space.html

Thử:

<div ng-repeat="item in items">
  <pre>{{item.description}}</pre>
</div>

Trình <pre>bao bọc sẽ in văn bản \ndưới dạng văn bản

Ngoài ra, nếu bạn in json, để nhìn tốt hơn, hãy sử dụng jsonbộ lọc, như:

<div ng-repeat="item in items">
  <pre>{{item.description|json}}</pre>
</div>

Demo

Tôi đồng ý với @Paul Weberđiều đó white-space: pre-wrap;là cách tiếp cận tốt hơn, dù sao sử dụng <pre>- cách nhanh chóng chủ yếu để gỡ lỗi một số nội dung (nếu bạn không muốn lãng phí thời gian vào phong cách)

Thật đơn giản với CSS (nó hoạt động, tôi thề).

.angular-with-newlines {
  white-space: pre;
}

• Nhìn ma đi! Không có thẻ HTML bổ sung!

Với CSS, điều này có thể đạt được một cách dễ dàng.

<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>  

Hoặc một lớp CSS có thể được tạo cho mục đích này và có thể được sử dụng từ tệp CSS bên ngoài

Vâng, điều đó còn tùy thuộc, nếu bạn muốn liên kết dữ liệu, không nên có bất kỳ định dạng nào trong đó, nếu không bạn có thể bind-htmlvà description.replace(/\\n/g, '<br>') không chắc chắn đó là những gì bạn muốn.

giải pháp css hoạt động, tuy nhiên bạn không thực sự kiểm soát được kiểu dáng. Trong trường hợp của tôi, tôi muốn có thêm một chút không gian sau khi ngắt dòng. Đây là một lệnh tôi đã tạo để xử lý việc này (bản đánh máy):

function preDirective(): angular.IDirective {
    return {
        restrict: 'C',
        priority: 450,
        link: (scope, el, attr, ctrl) => {
            scope.$watch(
                () => el[0].innerHTML,
                (newVal) => {
                    let lineBreakIndex = newVal.indexOf('\n');
                    if (lineBreakIndex > -1 && lineBreakIndex !== newVal.length - 1 && newVal.substr(lineBreakIndex + 1, 4) != '</p>') {
                        let newHtml = `<p>${replaceAll(el[0].innerHTML, '\n\n', '\n').split('\n').join('</p><p>')}</p>`;
                        el[0].innerHTML = newHtml;
                    }
                }
            )
        }
    };

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }
}

angular.module('app').directive('pre', preDirective);

Sử dụng:

<div class="pre">{{item.description}}</div>

Tất cả những gì nó làm là kết thúc từng phần của văn bản vào một <p>thẻ. Sau đó, bạn có thể tạo kiểu theo cách bạn muốn.

Chỉ cần thêm nó vào phong cách của bạn, điều này làm việc cho tôi

white-space: pre-wrap

Bằng văn bản này <textarea>có thể được hiển thị khi nó ở đó với không gian và phanh dòng

HTML

   <p class="text-style">{{product?.description}}</p>

CSS

.text-style{
    white-space: pre-wrap
}

Vâng, tôi hoặc là sẽ sử dụng <pre>thẻ hoặc sử dụng ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (sử dụng ng-bind-html nếu bạn đang sử dụng 1.2+) sau khi sử dụng .replace()để đổi /nsang<br />

Chỉ cần sử dụng kiểu css "trắng-space: pre-quấn" và bạn sẽ thấy ổn. Tôi đã có cùng một vấn đề khi tôi cần xử lý các thông báo lỗi mà đường ngắt và khoảng trắng thực sự đặc biệt. Tôi vừa thêm nội tuyến này vào nơi tôi đang ràng buộc dữ liệu và nó hoạt động như Charm!

Tôi đã có một vấn đề tương tự với bạn. Tôi không quan tâm đến các câu trả lời khác ở đây vì chúng không thực sự cho phép bạn tạo kiểu hành vi dòng mới rất dễ dàng. Tôi không chắc liệu bạn có kiểm soát dữ liệu gốc hay không, nhưng giải pháp tôi đã áp dụng là chuyển "các mục" từ một chuỗi các chuỗi thành một mảng các mảng, trong đó mỗi mục trong mảng thứ hai chứa một dòng văn bản . Bằng cách đó bạn có thể làm một cái gì đó như:

<div ng-repeat="item in items">
  <p ng-repeat="para in item.description">
     {{para}}
  </p>
</div>

Bằng cách này, bạn có thể áp dụng các lớp cho các đoạn văn và tạo kiểu cho chúng độc đáo bằng CSS.