AngularJS HTML filter on ng options

I am trying to create a custom filter that removes HTML in my select menu. This is what I tried, but it doesn't work.

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


This is a display of empty values.

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


Has anyone applied this type of filter to ng options in Angular?


source to share

1 answer

You need to change your filter as shown below and your html snippet. You can filter not entire items, but each header.

Below is a demo:

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=""></script>
<div ng-app="selectFilters">
    <div ng-controller="ItemCtrl">
            <select ng-model="item" ng-options="(item.Title | htmlToPlaintext) for item in Items"></select>

Run code



All Articles