Question

这是我的代码。我通过data-ng-options从控制器中选择加载选项，但我还想为这些项添加一个图标。例如，我想在每个选项的末尾添加<span class="fa fa-plus"></span>

＆＃13;

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <select ng-model="selectedName" ng-options="item for item in names">
</select>

  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.names = ["Emil", "Tobias", "Linus"];
    });
  </script>

  <p>In the above list i need icon at the end of eact option</p>

</body>

</html>

＆＃13;

Answer 1

您可以使用$sce ngSanitize模块执行此操作

＆＃13;

var app = angular.module('myApp', ["ngSanitize"]);
app.controller('myCtrl', function($scope, $sce) {
    $scope.names = ["Emil <i class='material-icons'>&#xE861;</i>",
        "Tobias <i class='material-icons'>&#xE862;</i>",
        "Linus <i class='material-icons'>&#xE863;</i>"
    ];
});
app.filter('unsafe', function($sce) {
    return $sce.trustAsHtml;
});

＆＃13;

<html>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.5/angular-sanitize.js"></script>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectedName">
            <option ng-repeat="item in names" ng-bind-html="item|unsafe">{{item}}</option>
        </select>
    </div>
    <p>In the above list I need icon at the end of eact option</p>
</body>

</html>

＆＃13;

data-ng-options中的自定义html内容

1 个答案: