AngularJS पाठ के रूप में <br> प्रतिपादन नहीं है एक नई पंक्ति

Question

के रूप में मुझे यकीन है कि इस से पहले कहा गया है, लेकिन मैं इस सवाल का जवाब नहीं मिल सकता है कर रहा हूँ।

मैं एक AngularJS स्क्रिप्ट है कि एक DB से खींच रहा है और उसके बाद सामग्री के लिए प्रतिपादन किया है। सबकुछ ठीक से काम कर रहा है, कुछ जगहों को छोड़कर मैं कुछ शब्दों को उनके बीच नई लाइनों के साथ जोड़ना चाहता हूं।

**in the script.js** 
groupedList[aIndex].CATEGORY = existingCategory+'\n'+thisCategory; 
groupedList[aIndex].CATEGORY = existingCategory+'<br>'+thisCategory; 

अगर मैं ऊपर कोड मैं कुछ भी नहीं दिख रहा है की पहली पंक्ति का उपयोग लेकिन वहाँ redered html में एक नई लाइन नहीं है। अगर मैं दूसरी पंक्ति <br> पाठ के रूप में प्रदान करने के का उपयोग करें और उत्पादन इस तरह दिखता है:

Instinct<br>Media 

बजाय

Instinct 
Media 

मैं पूरी स्क्रिप्ट पोस्ट कर सकते हैं कि अगर मददगार होगा, लेकिन मैं अनुमान लगा रहा हूँ कुछ आसान है कि मैं बस नहीं देख रहा हूँ।

अद्यतन यहाँ पूर्ण js

function qCtrl($scope, $filter, $http, $timeout){ 

    $scope.getCategories = function(){$http.post('quote.cfc?method=getCategories').success(function(data) { $scope.categories = data; }); } 
    $scope.getClassifications = function(){$http.post('quote.cfc?method=getClassifications').success(function(data) { $scope.classifications = data; }); } 
    $scope.getIndustries = function(){$http.post('quote.cfc?method=getIndustries').success(function(data) { $scope.industries = data; }); } 
    $scope.getKeywords = function(){$http.post('quote.cfc?method=getKeywords').success(function(data) { $scope.keywords = data; }); } 
    $scope.getSources = function(){$http.post('quote.cfc?method=getSources').success(function(data) { $scope.sources = data; }); } 

    $scope.getAllQuotes = function(){$http.post('quote.cfc?method=getAllQuotesJoined').success(function(data) { $scope.allQuotes = data; }); } 

    $scope.initScopes = function(){ 
     $scope.getCategories(); 
     $scope.getClassifications(); 
     $scope.getIndustries(); 
     $scope.getKeywords(); 
     $scope.getSources(); 
     $scope.getAllQuotes(); 
    } 
    $scope.initScopes(); 

    // SEARCH QUOTES 
    $scope.filteredQuotes = $scope.allQuotes; 
    $scope.search = {searchField:''}; 

    $scope.searchQuote = function(){ 
     var filter = $filter('filter'); 
     var searchCrit = $scope.search; 
     var newlist = $scope.allQuotes; 
     var groupedList = []; 
     var idList = []; 
     newlist = filter(newlist,{TESTQUOTE:searchCrit.searchField}); 
     for(i=0;i<10;i++){ 
      aIndex = idList.contains(newlist[i].TESTIMONIALID); 
      if(aIndex >= 0){ 
       thisKeyword = newlist[i].KEYWORD; 
       thisClassification = newlist[i].CLASSIFICATION; 
       thisCategory = newlist[i].CATEGORY; 
       existingKeyword = groupedList[aIndex].KEYWORD; 
       existingClassification = groupedList[aIndex].CLASSIFICATION; 
       existingCategory = groupedList[aIndex].CATEGORY; 
       if(thisKeyword != '' && existingKeyword.indexOf(thisKeyword) == -1){ 
        groupedList[aIndex].KEYWORD = existingKeyword+' - '+thisKeyword; 
       } 
       if(thisClassification != '' && existingClassification.indexOf(thisClassification) == -1){ 
        groupedList[aIndex].CLASSIFICATION = existingClassification+' \n '+thisClassification; 
       } 
       if(thisCategory != '' && existingCategory.indexOf(thisCategory) == -1){ 
        groupedList[aIndex].CATEGORY = existingCategory+'<br>'+thisCategory; 
       }    
      } else { 
       idList.push(newlist[i].TESTIMONIALID); 
       groupedList.push(newlist[i]); 
      } 
     } 
     $scope.filteredQuotes = groupedList; 
     } 
} 
Array.prototype.contains = function (needle) { 
    for (j in this) { 
     if (this[j] == needle) return j; 
    } 
    return -1; 
} 

यहाँ एचटीएमएल

<div ng-repeat="q in filteredQuotes" class="well clearfix"> 
         <h3>{{q.TITLE}}</h3> 
         <div class="row-fluid" style="margin-bottom:5px;"> 
          <div class="span3 well-small whBG"><h4>Classification</h4>{{q.CLASSIFICATION}}</div> 
          <div class="span3 well-small whBG pipeHolder"><h4>Categories</h4>{{q.CATEGORY}}</div> 
          <div class="span3 well-small whBG"><h4>Key Words</h4>{{q.KEYWORD}}</div> 
          <div class="span3 well-small whBG"><h4>Additional</h4>Industry = {{q.INDUSTRY}}<br>Source = {{q.SOURCE}}</div> 
         </div> 
         <div class="well whBG">{{q.TESTQUOTE}}</div> 
         <div class="tiny"> 
          Source comment : {{q.SOURCECOMMENT}}<br> 
          Additional Comment : {{q.COMMENT}} 
         </div> 
        </div> 
       </div> 

Answer 1

मैं गलत हो सकता है, क्योंकि मैं कोणीय उपयोग नहीं किया है है है, लेकिन मैं आप शायद का उपयोग कर रहे विश्वास करते हैं ng-bind, जो सिर्फ एक टेक्स्ट नोड बनाएगा।

इसके बजाय आप ng-bind-html उपयोग करना चाहते हैं जाएगा।

http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml

अद्यतन: ऐसा लगता है कि आप ng-bind-html-unsafe='q.category'

http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe

यहाँ एक डेमो है का उपयोग करना होगा:

http://jsfiddle.net/VFVMv/

Answer 2

आप या तो उपयोग करने की जरूरत है ng-bind-html-unsafe ... या आप ngSanitize मॉड्यूल में शामिल हैं और उपयोग करने की आवश्यकता ng-bind-html:

साथ एनजी-बाँध एचटीएम्एल असुरक्षित

उपयोग यह आप HTML के स्रोत पर विश्वास करता है, तो आप प्रतिपादन कर रहे हैं कहीं भी होगी जो कुछ भी आपने डाला है उसके कच्चे आउटपुट को प्रस्तुत करें।

<div><h4>Categories</h4><span ng-bind-html-unsafe="q.CATEGORY"></span></div> 

---

या एनजी-बाँध-एचटीएमएल

उपयोग आप HTML के स्रोत पर विश्वास नहीं करते यह अगर (अर्थात यह उपयोगकर्ता इनपुट) के साथ। यह सुनिश्चित करने के लिए एचटीएमएल को स्वच्छ करेगा कि इसमें स्क्रिप्ट टैग या संभावित सुरक्षा जोखिमों के अन्य स्रोत शामिल नहीं हैं।

<script src="http://code.angularjs.org/1.0.4/angular-sanitize.min.js"></script> 

तो यह संदर्भ आपके आवेदन मॉड्यूल में:

var app = angular.module('myApp', ['ngSanitize']); 

तो इसका इस्तेमाल:

<div><h4>Categories</h4><span ng-bind-html="q.CATEGORY"></span></div> 

Answer 3

मैं इस

की तरह उपयोग किया है

यकीन है कि आप इस को शामिल करें

function chatSearchCtrl($scope, $http,$sce) { 
// some more my code 

// take this 
data['message'] = $sce.trustAsHtml(data['message']); 

$scope.searchresults = data; 

और html में मैंने किया था

<p class="clsPyType clsChatBoxPadding" ng-bind-html="searchresults.message"></p> 

यह thats मैं अपने <br/> टैग गाया

Answer 4

आप \n उपयोग कर सकते हैं शब्द जोड़ और फिर कंटेनर div को यह शैली लागू करने के लिए मिलता है।

style="white-space: pre;" 

अधिक जानकारी https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

<p style="white-space: pre;"> 
 
    This is normal text. 
 
</p> 
 
<p style="white-space: pre;"> 
 
    This 
 
    text 
 
    contains 
 
    new lines. 
 
</p>

Answer 5

क्यों इतनी जटिल में पाया जा सकता है?

<pre>{{existingCategory+thisCategory}}</pre> 

यह <br /> स्वचालित रूप से अगर स्ट्रिंग '\ n', जिनमें शामिल है जब मैं पाठ क्षेत्र से डेटा बचत था कर देगा:

मैं मेरी समस्या इस तरह से बस को हल किया।