Angularjs'de satır sonlarını koru

Ben gördüm Bu SO sorusunu .

Yerine Kodum ng-bind="item.desc"kullanımları{{item.desc}} çünkü bir ng-repeatönce var.

Yani kodum:

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

Öğe açıklaması içerir \n oluşturulmamış yeni satırlar .

Yukarıdakilere {{item.description}}sahip olduğumu varsayarak yeni satırları nasıl görüntüleyebilirim ng-repeat?

@Pilau'nun cevabına dayanır - ancak kabul edilen cevabın bile olmadığı bir iyileştirme ile.

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

Bu, belirtildiği gibi yeni satırları ve boşlukları kullanır, ancak içerik sınırlarındaki içeriği de keser. Beyaz boşluk özelliği hakkında daha fazla bilgiyi burada bulabilirsiniz:

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

Yeni satırları kırmak, ancak metinden önce birden çok alanı veya beyaz alanı daraltmak istiyorsanız (orijinal tarayıcı davranışına çok benzer), @aaki'nin önerdiği gibi kullanabilirsiniz:

white-space: pre-line;

Farklı oluşturma modlarının güzel karşılaştırması: http://meyerweb.com/eric/css/tests/white-space.html

Deneyin:

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

<pre>Sarıcı ile metin yazdırır \nmetin olarak

ayrıca json yazdırırsanız, daha iyi bir görünüm için jsonfiltre kullanın , örneğin:

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

Demo

Yine de kullanarak daha iyi bir yaklaşım @Paul Weberolduğunu kabul ediyorum - çoğunlukla bazı şeyleri hata ayıklamak için hızlı bir şekilde (stil üzerinde zaman kaybetmek istemiyorsanız)white-space: pre-wrap;<pre>

CSS ile çok basit (işe yarıyor, yemin ederim).

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

• Bak anne! Ek HTML etiketi yok!

CSS ile bu kolayca elde edilebilir.

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

Veya bu amaçla bir CSS sınıfı oluşturulabilir ve harici CSS dosyasından kullanılabilir

Peki, bağlama veriler istiyorsanız, içinde biçimlendirme herhangi olmamalıdır, bağlı aksi yapabilirsiniz bind-htmlve yapılacak description.replace(/\\n/g, '<br>') bu hesabın olsa istediği bu değil.

css çözümü çalışıyor, ancak stil üzerinde gerçekten kontrol sahibi değilsiniz. Benim durumumda, satır sonundan sonra biraz daha yer istedim. İşte bu (typescript) işlemek için oluşturulan bir direktif:

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

kullanın:

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

Tek yaptığı, metnin her bir parçasını bir <p>etikete sarmaktır. Bundan sonra istediğiniz gibi şekillendirebilirsiniz.

Sadece bunu stillerinize ekleyin, bu benim için çalışıyor

white-space: pre-wrap

İçindeki bu metinle <textarea> ile orada boşluklar ve hat frenleri ile olduğu gibi görüntülenebilir

HTML

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

CSS

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

Evet, ben de kullanacağı <pre>etiketi veya kullanmak ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe kullandıktan sonra (kullanım ng-bağlama-html Eğer 1.2 ve üzeri kullanıyorsanız) .replace()için değişim /niçin<br />

Sadece "white-space: pre-wrap" css stilini kullanın ve gitmek için iyi olmalısınız. Satır kesmeleri ve beyaz boşluklar gerçekten özel olan hata mesajlarını işlemem gereken aynı sorunu yaşadım. Verileri bağladığım bu satır içi çizgiyi ekledim ve Charm gibi çalışıyor!

Sana da benzer bir sorun yaşadım. Buradaki diğer cevaplara çok hevesli değilim çünkü satırsonu davranışını çok kolay şekillendirmenize gerçekten izin vermiyorlar. Orijinal veri üzerinde kontrolünüz olup olmadığından emin değilim, ancak benimsediğim çözüm, "dizinin" diziden oluşan bir dizi olmaktan, ikinci dizideki her öğenin bir metin satırı içerdiği diziler dizisine geçmesini sağlamaktı. . Bu şekilde şöyle bir şey yapabilirsiniz:

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

Bu şekilde sınıfları paragraflara uygulayabilir ve CSS ile güzelce biçimlendirebilirsiniz.