Как отобразить массив с html-содержимым без ng-repeat? AngularJS

Question

У меня есть это

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

Я хотел бы это

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

Как я могу сделать это без использования ng-repeat?

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>

или еще

используйте $sce.

.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>