space is shown when selecting the dropsdown option - angularjs

Question

I have created an application in AngularJS with a drop down with space in option using a filter. The application is working fine with the options in drop down with indentation space before the values but the problem is when a select an option which is having a space, the space is also shown in the view like as shown below

actually I want the indentation space within the drop-down options but only thing is that I don't want that space to be get displayed when selection shown above

can anyone please tell me some solution to prevent the space to display when selection

My code is as given below

JSFiddle

<select>
    <option ng-repeat="(key, value) in headers">{{value | space}}
    </option>
</select>

Answer 1

<select ng-model="selectedValue" ng-change="selVal = selectedValue.trim(); selectedValue=selVal">
    <option ng-if="selVal">{{selVal}}</option>
    <option ng-repeat="(key, value) in headers" ng-if="selVal != value.value">
        {{value | space}}
    </option>
</select>

Answer 2

This is as close as it gets without jquery, temporarily changing the view state of the option when it's chosen. If that doesn't satisfy you and you still want it to be shown indented when the dropdown menu is open, check out this question on how to detect the state of the select component and update the display function accordingly. Alternatively, you can create your own select directive and manage the details within that, but I doubt that's worth the trouble if you're not using it in many places.

var app = angular.module('myApp', []);

app.controller('ArrayController', function ($scope) {
    $scope.headers = [{
        value: 'value 1'
    }, {
        value: 'value 2',
        mainId: 12
    }, {
        value: 'value 3'
    }, {
        value: 'value 4',
        mainId: 14
    }, {
        value: 'value 5'
    }, {
        value: 'value 6',
        mainId: 18
    }];

    $scope.chosen = $scope.headers[0].value;

    $scope.display = function(header) {
        var chosenObject = _.find($scope.headers, {value: $scope.chosen});
        if (!_.isUndefined(header.mainId) && header !== chosenObject) {
            return '\u00A0\u00A0' + header.value;
        } else {
            return header.value;
        }
    }
});

HTML here:

<div ng-app='myApp' ng-controller="ArrayController">
    <br></br>
    SELECT:
    <select ng-model="chosen" ng-options="header.value as display(header) for header in headers">
    </select>
</div>

There's yet another alternative with CSS and ng-class, fiddle here:

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.headers = [{
        value: 'value 1'
    }, {
        value: 'value 2',
        mainId: 12
    }, {
        value: 'value 3'
    }, {
        value: 'value 4',
        mainId: 14
    }, {
        value: 'value 5'
    }, {
        value: 'value 6',
        mainId: 18
    }];

    $scope.chosen = $scope.headers[0].value;

    $scope.isIndented = function(header) {
        var chosenObject = _.find($scope.headers, {value: header});
        return !_.isUndefined(chosenObject.mainId);
    };
});

app.filter('space', function() {
  return function(text) {
       if(_.isUndefined(text.mainId))
       {
           console.log('entered mainId');
           return text.value;
       }
       else
       {
           console.log('entered');
           return '\u00A0\u00A0' + text.value;
       }
  };
});

HTML:

<div ng-app='myApp' ng-controller="ArrayController">
    <br></br>
    SELECT:
    <select ng-model="chosen" ng-options="header.value as (header | space) for header in headers" ng-class="{'indented-value': isIndented(chosen)}">
    </select>
</div>

CSS:

.indented-value {
    text-indent: -9px;
}