user1532669 user1532669 - 8 days ago 5
AngularJS Question

How do I remove a select list option from a list generated from my Firebase DB?

Not sure I'm going about this correctly. What I want to do is create a select list of options from my firebase db. The list is returning and displaying as I expect. I want to be able to select an option and click a "delete" button so I can delete options from the list. Currently if I select an option all of the options disappear. See this page for an example.

What am I doing wrong? Would I be better using ng-options here?

<form name="categoryRemoveForm" class="category-form">
<select ng-model="cat">
<option ng-repeat="cat in cat.cats" value="{{cat.$id}}">{{cat.name}}</option>
</select>

<div class="row">
<div class="col span-1-of-3">
<label>&nbsp;</label>
</div>
<div class="col span-2-of-3">
<input type="submit" id="submit" value="Remove Category" ng-submit="removeCategory(cat)" ng-disabled='!categoryRemoveForm.$valid'/>
</div>
</div>
</form>

Answer

your model for select is named cat so when you select an option and set the model the cat in the ngRepeat is replaced by it due to inheritance so cat.cats is undefined and ngRepeat can not repeat it

here is the plunker demonstrating how your value changes

http://plnkr.co/edit/qLoe8j1QyZarNjHtaHT9?p=preview

So you should rename your model to something like selectedCategory, and as long as removeCategory is in the same scope you don't have to pass the model value

Comments