Question

我正在使用从DB检索的数据填充元素的内容。这是在页面的控制器内完成的。 HTML看起来像：

  <select class="form-control" id="maxsize" style="width:50px">

     {{List_of_Possible_Sizes}}

  </select>

在控制器中，字符串“List_of_Possible_Sizes”已正确构建（我知道因为我用JS的结果替换了{{...}}并获得了正确的结果），但是当查看其中的元素时浏览器我看到JS生成的完整字符串是一个实际的字符串（例如：

 " 
   <option value.....</option><option....>...."

并且尽管分配是：

List_of_Possible_Sizes = $ sce.trustAsHtml（MyString）;

你能建议的任何线索吗？

感谢。

Answer 1

如果将字符串放在花括号<select>{{some html}}</select>内，它将显示为文字字符串。

相反，您需要使用ng-bind-html属性来显示html。

<select ng-bind-html="your html"></select>

注意：这只适用于受信任的html。

Answer 2

对于你的<select>我会采用以下两种方式之一：两者都在这个片段中：

  <div ng-controller="myController">
    <select class="form-control" id="maxsize" style="width:50px">
      <option ng-repeat="size in sizes" value="size">{{size}}</option>  
    </select>

   <select ng-options="size as size for size in sizes" ng-model="selected"></select>
  </div>

此示例的控制器是：

angular.module('app', [])
        .controller('myController', function($scope){
          $scope.sizes = ['S', 'M', 'L', 'XL'];
        });

大小来自于无关紧要，可以像这里一样是静态的，也可以通过与数据库通信的服务来提供。这只是为了演示输出<select>

的多种方式

Angularjs与$ sce.trustAsHtml无法正常工作

2 个答案: