angularJS emptying input field on filter

Question

Today I faced a situation with angularJS.

Hi have a recipe website, and to list the ingredients and theyr respective dosage I'm using angular's ng-repeat (here goes the snippet).

<div ng-repeat="food in foodList | filter:query">
    <label>
        {{food.name}}
    </label>
    <input type="text" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
</div>

The thing is that when I apply the filter, all inputs I previously inserted some value, if they are hidden because of the filter, they return to empty.

Is there anyway around this?

Answer 1

I think you probably want to bind the input to something using ng-model , for example:

<input type="text" ng-model="food.dosage" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">

That will implement two-way binding from your model to the input tag, so that when ng-repeat re-runs, the previously entered values will be re-bound from the model.