angularJS emptying input field on filter - javascript

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?

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.

Related

Angular ngRepeat dynamically create ngModel with $index

I have this html:
And I want to create dynamically ng-models for these inputs:
<div class="order" ng-repeat="order in newOrders">
<input type="checkbox" ng-model="model$index" />{{$index}} please check
</div>
and it's not working.
I there a way to dynamically create ng-model in a input, inside a ng-repeat?
EDIT:
The final result is:
<input type="checkbox" ng-model="model$index" />0 please check
My expected result is:
<input type="checkbox" ng-model="model0" />0 please check
The way you are trying to do its not appropriate, creating separate
variable for each element, that will make more maintenance sort of
work.
Also this will become messy to when you apply any filter on ng-repeat. Instead of that you could place that model value inside the ng-repeat element which is order here order.
<div class="order" ng-repeat="order in newOrders">
<input type="checkbox" ng-model="order.value" />{{$index}} please check
</div>

Angular - Adding an input's value with a number from $scope

I have the following code:
<div data-ng-controller="MainController">
<input class="amount" type="text" name="" value="" />
<input class="result" type="text" name="" value=""/>
</div>
I want to take a numerical value from $scope and add it to a number entered by a user in the input with class "amount" and display the result in the input with class "result". So, basically, the variable is defined in the MainController function as the following:
$scope.cost = 100;
I'm a bit confused as to what the best way is to do this, I see there are ng-value and ng-model directives at my disposal but I am having a hard time understanding which is the right one for this application (and how to properly use them).
Seems like your application is asking for an inputs and they are going to submit there values OR gonna store it somewhere in DB. So ng-model (two way binding) will suits you application, which will update the value on model & view both.
Markup
<div data-ng-controller="MainController">
<input class="amount" type="text" ng-model="cost"/>
</div>
Above field will pre-populated as 100 and as you update it will also change $scope.cost value and the value if it is displayed on view anywhere.
Don't think about the ng-value that is only one way sort of binding. You can assign the value to input using ng-value="cost" that will only update the value attribute of input but when you update input from html you will never get those changes reflected inside cost scope variable as ng-value is meant for single way binding. Thinks like you should use use ng-value only when you want to display a value.
you should use ng-model
ng-value : Its a directive useful for evaluating expression and the value is bound to $scope used for evaluating expressions
ng-model : helps in two-way data binding ,view-->controller and vice versa moreover its a directive binds the value of HTML controls

knockout textinput modify observeable not updating text

i´m using textinput data-binding off the latest knockout version.
on an input like:
<input type="text" placeholder="name" data-bind="textinput:vm.found().term">
and it works just like a charme, problem:
when i modify the value with some other script like:
vm.found().term("somecontent")
the input does not change?
i need the value of the textinput to change when i change the observable
the doc says nothing about textInput
You should never have raw, deeply nested bindings like you have there. Assuming the found value has changed, it the text box will still be bound to the previous found object. You probably should be using a with binding somewhere.
<div data-bind="with: vm.found">
<input type="text" placeholder="name" data-bind="textinput: term">
</div>

ng-class evaluation with ng-repeat in angular

I am trying to add red frame to a field in a form in angular.
When working with static fields (not populated with ng-repeat) everything is working good. When the field is created with ng-repeat looks like the ng-class that uses the current index is not working. The form state is correct but the class with the red frame is not added to the field.
See this Plunker: http://plnkr.co/edit/hDfTHY?p=preview
When adding a value to all input fields the button become enabled. However, only first input is red when empty.
Thanks
One option is to add inner form:
<div ng-form="nested" class="col-md-4" ng-class="{'has-error': nested.item.$invalid}">
<input type="text"
ng-model="item"
class="form-control"
name="item"
id="item{{$index}}"
required ng-minlength="2">
</div>
See this question

Creating an input for each value in an array of strings with ng-repeat

I have an a array of strings in my model, I would like to create a text input for each one and bind them to the array, using Twitter Bootstrap typeahead with them. Here is what I have tried:
<div class="control-group inline" ng-repeat="offer in userinfoadd.offers">
<label class="control-label" for="offer">Offer </label>
<div class="controls">
<input type="text" bs-typeahead="typeahead" value="{{offer}}">
</div>
</div>
Here is the code in my controller:
$scope.userinfoadd = {
offers: ['one','two','three','four','five']
};
//get the typeahead
$http.get('data/activities.json').success(function(data) { //TODO: Stub, replace for an API call!
$scope.typeahead = data;
});
Now the inputs render but they don't work. Any ideas?
You need to bind the model to the input like follows, then it should work:
<input type="text" bs-typeahead="typeahead" ng-model="userinfoadd.offers[$index]" />
See a simple example here: http://jsfiddle.net/flek/hwpuT/
UPDATE
Unfortunately it doesn't seem to be an elegant idea cause Angular re-renders your list once you chance an entry of the array which blurs your input every time you chance 1 character.

Categories