javascript - AngularJS 在 ng-options 上剥离 HTML 过滤器

Question

我正在尝试创建一个自定义过滤器，用于去除我选择菜单上的 HTML。这是我尝试过的方法，但它不起作用。

            <select
                ng-options="item.name for item in list | htmlToPlaintext">
                <option value="">Select</option>
            </select>

它正在呈现空值。

            app.filter('htmlToPlaintext',
            function () {
                 return function (items) {
                      var filtered = [];
                      angular.forEach(items, function (item) {
                            var stripped = String(item).replace(/<[^>]+>/gm, '');
                            filtered.push(stripped);
                      });
                      return filtered;        
                 }
            });

有没有人将这种类型的过滤器应用于 Angular 中的 ng-options？

Answer 1

您需要如下所示修改您的过滤器以及您的 html 代码段。您可以应用过滤器而不是整个项目，而是每个标题。

下面是演示:

angular.module('selectFilters', ['filters']);
angular.module('filters', []).filter('htmlToPlaintext', function() {
    return function(text) {
      return String(text).replace(/<[^>]+>/gm, '');
    }
  });

function ItemCtrl($scope, $filter){
    $scope.Items = [
        {ID: '000001', Title: '<b>Chicago</b>'},
        {ID: '000002', Title: '<b><i>New York</i></b>'},
        {ID: '000003', Title: '<div><p>Washington</p></div>'}
    ];    
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="selectFilters">
    <div ng-controller="ItemCtrl">
        <div>
            <select ng-model="item" ng-options="(item.Title | htmlToPlaintext) for item in Items"></select>
        </div>
    </div>
</div>