如何在沒有ng-repeat的情況下顯示帶有html內容的數組？ AngularJS

Question

我有這個

"items" : ["<p>Item 1</p>","<span>Item 2</span>"] 

我想這

<div id="container"> 
    <p>Item 1</p> 
    <span>Item 2</span> 
</div> 

我怎麼能做到這一點，而無需使用NG-重複？

Answer 1

在AngularJS中，您可以使用ng-bind-html指令來打印html，並且您必須包含$sanitize服務。

現在，傳遞數組作爲HTML字符串的觀點，你可以使用Array.prototype.join()：

angular 
 
    .module('App', ['ngSanitize']) 
 
    .controller('AppController', ['$scope', function ($scope) { 
 
    var obj = { 
 
     "items": ["<p>Item 1</p>","<span>Item 2</span>"] 
 
    }; 
 
    $scope.items = obj.items.join(''); 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.10/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.10/angular-sanitize.min.js"></script> 
 

 
<div ng-app="App" ng-controller="AppController"> 
 
    <div id="container" ng-bind-html="items"></div> 
 
</div>

Answer 2

您可以直接使用這樣的..

$scope.itemNames = {"items" : ["<p>Item 1</p>","<span>Item 2</span>"]}; 

    <div ng-bind-html-unsafe="itemNames.items"> </div> 

否則

使用$ sc即

.controller('ctrl', ['$scope', '$sce', function ($scope, $sce) { 
    $scope.itemNames = {"items" : ["<p>Item 1</p>","<span>Item 2</span>"]}; 
    $scope.newNames= $sce.trustAsHtml($scope.itemNames.items); 
    }]); 

    <div ng-bind-html="newNames"> </div>