ng-options上的AngularJS strip 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选项？

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>