我敢肯定这已经被问过了,但是我找不到答案。
我有一个从数据库中提取然后呈现到内容的AngularJS脚本。一切工作正常,除了我试图将一些单词用它们之间的新行连接起来的几个地方。
**in the script.js** groupedList[aIndex].CATEGORY = existingCategory+'\n'+thisCategory; groupedList[aIndex].CATEGORY = existingCategory+'<br>'+thisCategory;
如果我使用上述代码的第一行,则看不到任何内容,但重新标记的html中没有新行。如果使用第二行,则将其<br>渲染为文本,并且输出如下所示:
<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; }
这是HTML
<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>
我可能是错的,因为我从未使用过Angular,但是我相信您可能正在使用ng-bind,它只会创建一个TextNode。
ng-bind
您将要使用ng-bind-html代替。
ng-bind-html
http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml
更新 :看来您需要使用ng-bind-html-unsafe='q.category'
ng-bind-html-unsafe='q.category'
http://docs.angularjs.org/api/ng.directive:ngBindHtml不安全
这是一个演示:
http://jsfiddle.net/VFVMv/