using ng-repeat angular with filter to exclude blank value

Question

I'm trying to get non-blank elements in my select using filter, but this doesn't work properly.

<select ng-model="selectedSubject.id">
    <option value="0">
        <%= res.getString("portlet.form.subjectField.default")  %>
    </option>  
    <option ng-repeat="sujet in subjects.allSubjects | filter:{name_fr:'!!'}" value="{{sujet.id}}">
        {{sujet.name_fr}}
    </option>
</select>

Answer 1

filter:{my_field:'!!'} will filter out only null values.

If you want to filter out empty values, or both null and empty, you should use a custom filter

<option ng-repeat="sujet in subjects.allSubjects | filter:notEmptyOrNull" value="{{sujet.id}}">{{sujet.name_fr}}</option>

Controller

$scope.notEmptyOrNull = function(item){
  return !(item.name_fr === null || item.name_fr.trim().length === 0)
}

Answer 2

The filter that you are using will only filter the data that contains null values not blank.

To filter out blank data you have to create filter.This question has already been answered on stack overflow. Visit this link.

Angular - Filter to remove blank strings from array

Answer 3

You have to set the model so that angular selects the right option base on the select ngModel

<select ng-model="selectedSubject.id" ng-options="sujet.id as sujet.name_fr in subjects.allSubjects track by sujet.id"></select>

And set the default id on the controller.

$scope.allSubjects = subjects;
$scope.selectedSubject.id = subjects[0].id;