AngularJS - ng-select not working as expected

Question

I have a filter drop down for some tabular data that reads data from a local storage item, the select tag is shown below, and below that is the code to add items to the select tag and the model for the filter.

The issue is that whilst the data filtered is correct when you refresh the page, the selected item only shows the correct value if the local storage value is true.

No matter what value the local storage item is selected="selected" is always added to the "Excluded from Search" option.

Can't for the life of me work out why, any help advice appreciated.

<select class="form-control form-control-sm" ng-model="filterSearch" ng-change="setFilterS()" id="theFilterS" >                            
    <option ng-selected="{{option.value == filterSearch}}" ng-repeat="option in filterSearchOptions" value="{{option.value}}" >{{option.DisplayName}}</option>
</select>

$scope.filterSearch = localStorage.getItem("FilterSearch");

$scope.filterSearchOptions = [{
        value: '',
        DisplayName: 'All',
    }, {
        value: 'false',
        DisplayName: 'Included in Search',
    }, {
        value: 'true',
        DisplayName: 'Excluded from Search',
    }];

Marcus Höglund · Accepted Answer · 2017-11-16 07:03:32Z

1

You should try with the ng-options directive which IMO gives a simpler approach then ng-repeat

angular.module('app',[]).controller('testCtrl',function($scope){
$scope.filterSearch = 'true';

$scope.filterSearchOptions = [{
        value: '',
        DisplayName: 'All',
    }, {
        value: 'false',
        DisplayName: 'Included in Search',
    }, {
        value: 'true',
        DisplayName: 'Excluded from Search',
    }];
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="testCtrl">
<select 
  class="form-control form-control-sm" 
  ng-model="filterSearch" 
  ng-change="setFilterS()" 
  id="theFilterS" 
  ng-options="option.value as option.DisplayName for option in filterSearchOptions">
</select>

{{filterSearch}}

</div>

answered Nov 16, 2017 at 7:03

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

djcamo Over a year ago

Have tried this code and the values for each option are appended with string: eg. <option label="Included in Search" value="string:false">Included in Search</option>, and this is added - <option value="?" selected="selected"></option>

djcamo Over a year ago

used str.split to get the boolean value and all workd perfectly, thanks

Collectives™ on Stack Overflow

AngularJS - ng-select not working as expected

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related