Use Filter To Search In Options add a null option in angularJS

Question

I Have a problem with filter in AngularJS . i use filter to show options based Input From Search Box . everything works but every time i search(except default option (Set with ng-model)) it adds a null option in results .

i set ng-model for <select> tag

here is my Code

<div class="choosePatternHeader">
    <span>Pattern name</span>
    <input ng-model="obj.name" type="text">

</div>
<div class="select_div">
    <select  size="4"  ng-model="pattern" ng-options="p.name  for p in patterns | filter:obj">
    </select>
</div>

here is result when i search "pattern 4"

<select class="ng-pristine ng-valid" ng-options="p.name for p in patterns | filter:obj"    ng-model="pattern" size="4">
<option value="?" selected="selected"></option>
<option value="0">pattern 4</option>
</select>

and result when i search "pattern 1" (default option)

 <select class="ng-pristine ng-valid" ng-options="p.name for p in patterns | filter:obj"    ng-model="pattern" size="4">
<option value="0">pattern 1</option>
</select>

here is a jsFiddle

Marius Soutier · Accepted Answer · 2013-08-01 11:43:22Z

1

The same happens with <option ng-repeat="p in patterns">, so I guess that's the underlying problem.

The only "solution" I have found is to simply make use of the empty value by defining an empty option, e.g. <option value="">Please select</option>.

answered Aug 1, 2013 at 11:43

Marius Soutier

11.3k1 gold badge40 silver badges48 bronze badges

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

1 Comment

Soheil Ghahremani Over a year ago

tnx you . i have created an issue on Git of AngularJS

Rigoberto Reyes · Accepted Answer · 2013-11-23 03:45:50Z

1

I solved as follows

function MyController($scope, $filter)
{
    $scope.patterns=[{name:'pattern 1'},{name:'pattern 2'},{name:'pattern 3'},{name:'pattern 4'}];
    $scope.pattern=$scope.patterns[0];

    $scope.$watch('obj.name', function(value){
          var filtered_devices = $filter('filter')($scope.patterns, {name:$scope.obj.name});         
          if (filtered_devices) {
              $scope.pattern = filtered_devices[0];
          }
    }, true);
}

answered Nov 23, 2013 at 3:45

Rigoberto Reyes

111 bronze badge

Comments

Steve Klösters · Accepted Answer · 2013-08-01 09:04:26Z

0

AngularJS will indeed add a dummy option if ng-model is set to a value that is not in ng-options. I am not aware of a way to prevent this when the filter doesn't return any values (when ng-options is empty, ng-model can never be in it), but when it does, you could set ng-model to the first item, which means the dummy option will not be created. You could use ng-change or similar to do this.

answered Aug 1, 2013 at 9:04

Steve Klösters

9,4472 gold badges44 silver badges53 bronze badges

1 Comment

Soheil Ghahremani Over a year ago

i add ng-model . try my jsFiddle link . everything work untill when i insert a string in searchbox to filter the data

Collectives™ on Stack Overflow

Use Filter To Search In Options add a null option in angularJS

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related