Search code examples
javascriptangularjsng-options

how to have a blank value in ng-option, not NULL


So I am new to angularjs and I can't find how to do this anywhere: I want to use ng-options and have a blank value as an option for all.

<h5 style="display:inline;">Level    </h5>
<select name="Levelfilter" ng-model="search.level">
    <option selected value="">all    </option>
    <option value="0">Cantrip    </option>
    <option value="1">1st    </option>
    <option value="2">2ed    </option>
    <option value="3">3rd    </option>
    <option value="4">4th    </option>
    <option value="5">5th    </option>
    <option value="6">6th    </option>
    <option value="7">7th    </option>
    <option value="8">8th    </option>
    <option value="9">9th    </option>
</select>

<h5 style="display:inline;">duration</h5>

<select name="durationfilter" ng-options="c.duration as c.duration for c in allspells.spells | unique:'duration'" ng-model="search.duration">
    <option selected value="">all    </option>
</select>

<h5 style="display:inline;">Casting Time    </h5>

<select name="castingTimefilter" ng-options="c.castingTime as c.castingTime for c in allspells.spells track by c.castingTime | unique:'castingTime'" ng-model="search.castingTime" ng-init="search.castingTime=''">
    <option selected value="">all    </option>
</select>

The Levelfilter select works the way I want it to. When the all option is selected, the filter shows all levels and the all option has a value of "". However the 2nd and 3rd selects that use the ng-option are setting the value to NULL not "". Is there a way of changing this or do I have to add in code something like "if null then serch.castingTime == ''"

Thanks in advances for any help.


Solution

  • this is the work around i have ended up using, if there is a better way of doing this let me know. But this works for now.

    app.filter("removenull", function(){ return function(object, query){
        if(query.castingTime==null){
            query.castingTime=""
        }
        if ( query.duration==null) {
                  query.duration=""
        }
        return object;
    }});