Search code examples
javascriptangularjshtml-selectspacedropdownbox

space is shown when selecting the dropsdown option - angularjs


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

enter image description here

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>

Solution

  • <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>