html - How to remove empty values in drop down using ng-option in angular js?

Question

• How to remove empty and blank values in the Drop Down using ng-option in angular js?
• Some data's are in college name some of it not having the college name so what is happening in the drop down, the empty values are displaying.

• I am expecting only values, not empty blank items, so how to remove empty items.

• My Plunker.

• And how to Mingle College Name and School Name into a single Drop Down.

My Drop Down:-

<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></select>

  <label for="">school name</label>
       <select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></select>

My Html:-

<div class="col-md-3">
    <label for="">College name</label>
    <select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users" class="form-control" placeholder="search" required>
        <option value="">All</option>
    </select>
    <label for="">school name</label>
    <select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users" class="form-control" placeholder="search" required>
        <option value="">All</option>
    </select>
    <div ng-repeat="question in users | filter: searchtable | filter: myrole"> <small>
                  <table border="0">
                    <tbody>
                      <th>{{question.displayName}}</th>
                    <th style="background: yellow;">,{{question.roles[0]}}</th>
                    <th style="background: light;">,{{question.request_role[0]}}</th>

                    </tbody>
                          </table>


                  </small> </div>
    <p>How to mingle college name and school name into single drop down:-</p>
    <p>And how to do filter college name and school name while selecting the filed</p>
</div>

My Data:-

    $scope.users = [{
"_id": "59a6c7c96c2ce324124cc1d8",
"displayName": "blink foundation",
"provider": "local",
"location": "icf",
"username": "blink",
"dob": "1991-10-04T18:30:00.000Z",
"phone": 7299345250,
"religion": "Hindu",
"college_name": "Arignar Anna",
"__v": 2,
"created": "2017-08-30T14:12:25.397Z",
"roles": [
"block"
],
"request_role": [
"Change Agent"
],
"lastName": "foundation",
"firstName": "blink"
},
{
"_id": "598abfe4cce8ed582a2d8b32",
"displayName": "avinaash muthukumar",
"provider": "local",
"username": "avinaash muthu",
"__v": 0,
"created": "2017-08-09T07:55:16.511Z",
"roles": [
"admin"
],
"request_role": ["Change Agent"],
"firstName": "avinaash"
},
{
"_id": "5979a591c999e9302caece13",
"displayName": "Ajmal Afthab",
"provider": "local",
"location": "Urapakkam",
"username": "ajmal_afthab",
"dob": "1995-01-23T18:30:00.000Z",
"phone": 9500269131,
"religion": "Islam",
"school_name": "public school",
"__v": 1,
"roles": [
"kp"
],
"request_role": ["school student"],
"categories": [
"Religion & Culture",
"Moral Ethics",
"Social Psychology"
],
"lastName": "Afthab",
"firstName": "Ajmal"
},
{
"_id": "5978a2886d5b10ec321a2114",
"displayName": "happy selvam",
"provider": "local",
"username": "happy",
"__v": 0,
"created": "2017-07-26T14:09:12.730Z",
"roles": [
"admin"
],
"request_role": ["parent"],
"categories": [],
"lastName": "selvam",
"firstName": "happy"
},
{
"_id": "58e73c5c9e2f3f1421e241be",
"displayName": "sarawana kumar",
"religion": "hindu",
"college_name": "IIT",
"__v": 2,
"roles": [
"user"
],
"request_role": ["school student"],
"categories": [
"Religion & Culture",
"Social Psychology"
],
"lastName": "kumar",
"firstName": "sarawana"
},
{
"_id": "58d0fab62758cc482c295eba",
"displayName": "avinaash kumaran",
"provider": "local",
"username": "avinaash",
"roles": [
"block"
],
"request_role": ["parent"],
"categories": [],
"lastName": "kumaran",
"firstName": "avinaash"
},
    ]

Answer 1

You can use a filter (or write a custom filter) to remove the blank options for your first case.

HTML:

<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users | filter:{ college_name :'!!'}" class="form-control" placeholder="search" required>
    <option value="">All</option>
</select>
<label for="">school name</label>
<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users | filter:{ school_name :'!!'}" class="form-control" placeholder="search" required>
    <option value="">All</option>
</select>

Now for your second case, if you want to combine both school and colleges into one dropdown, just add the following. Use a custom filter to return non empty values.

HTML

<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.college_name +''+ item.school_name for item in users|filter:notBlank" class="form-control" placeholder="search" required><option value="">All</option></select>

JS:

 $scope.notBlank= function(item){
   return (item.college_name || item.school_name)
} 

Working Plunker: http://plnkr.co/edit/QF5rnghuIWfcdeQdbAvd?p=preview