ngSelected not working in select element

Question

I want the value in the input to filter the values in the dropdown, and ng-selected to be true for the option that has $index == 0.

When the filter takes action, the value in ng-selected changes to true and the selected property on the element does not change to selected="selected". If I remove the model, it works as intended.

<div ng-app ng-controller="AppCtrl" ng-init="sigStyles.companies = ['facebook', 'twitter', 'tumblr', 'myspace']">

    <input type="text" ng-model="socialSearch"></input>

    <select>
        <option ng-repeat="company in sigStyles.companies | filter:socialSearch" value="{{company}}" ng-selected="{{$index === 0}}">{{company}}</option>
    </select>

</div>

Does someone know how to get the selected property to change or does anyone know how to make a search input to remove options from a select based on its input?

Link to my fiddle here.

Jackie · Accepted Answer · 2015-03-10T04:44:51.393

So the answer above is correct if not a little verbose. I would not recommend using a watch because I find it to be a little more troublesome. So basically here is what I came up with (feel free to ding me if I missed something but remember I am trying to help :-) Plnkr This one I forgot to include the list but it can be included like the second one.

Basically the JS looks like this...

angular.module('myApp', []);

function MainCtrl($scope) {
    $scope.options = ['as', 'b', 'c', 'a2'];
    $scope.opt1 = 0;  
    $scope.selectedOpt = $scope.options[0];
    $scope.setOption = function() {
        if($scope.options.indexOf($scope.inFilter)  > -1){
              $scope.selectedOpt = $scope.inFilter
        };
    }
}

The set options is just checking to see if the text exists and set the value if it does.

I would probably recommend something more like this that way if you want to display a message when there are no matches you can.

Hope this helps!

Thanks for that but the problem is that if i type a substring of the array into the search, the if statement in setOption is false and the selectedOpt stays at options[0] which has been filtered out. So again I need a condition to say "set selectedOpt to the new filtered array's index 0. — P0lska, Mar 10 '15 at 04:55
Sure so I updated https://jsfiddle.net/w6tt4esy/23/ now when you type it reselects the first on As well. Just an else — Jackie, Mar 10 '15 at 11:49

score 0 · Answer 2 · answered Mar 10 '15 at 02:52

We can use the search model to as an argument to the filter to create a new array which is filtered. This array is used in ng-select. Any changes in the search model are watched and used to update the filtered array.

<div ng-app="myapp">
    <div ng-controller="ctrlParent">
        <input type="text" ng-model="search" />
        <select ng-model="storedModel" ng-options="opt for opt in filteredArray | filter:search"></select>
    </div>
</div>

js:

var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope,filterFilter){
    $scope.list = ["facebook","twitter","tumblr","google"];
    $scope.filteredArray = $scope.list;
    $scope.storedModel = $scope.filteredArray[0];
    $scope.$watch('search',function(newValue){
       $scope.filteredArray = filterFilter($scope.list, newValue);
       $scope.storedModel = $scope.filteredArray[0];
    });    
});

Fiddle of working solution here.

ngSelected not working in select element

2 Answers2