Different 'ng-model name' in ng repeat - Possible?
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
In this case, there are some repeat todo item (based on todos json data) will show on frontend
My Problem: What i type on any input field , all input field showing same data
I need different ng-model name on each input field , I guess like this ng-model="tag($index)"
You could place the newly created model inside tag array by its $index, while declaring model inside the tag you should use array notation [] instead of ()
ng-model="tag($index)"
should be
ng-model="tag[$index]"
Markup
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[$index]">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
It is possible like below
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[todo]"> <--todo.key-->
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
You can do it like this:
<input type="text" ng-model="todo.tag">
Related
How can I concatenate string in HTML Attribute. I am using angular controller and in the part where I write some array in HTML (Code is below), I want to give input tag name that is "kolicina" + {{idhrana}} witch is attribute of object jelo.
<div class = "rezultat" ng-repeat="jelo in hrana | filter:pretrazi_namirnice">
<div> {{jelo.naziv}} </div>
<div> {{jelo.energijaKCal}}</div>
<div> {{jelo.proteini}}</div>
<div> {{jelo.uglj_hidrati}}</div>
<div> {{jelo.masti}}</div>
<div><input type=text nama="kolicina"+{{idhrana}}></div>
<div><input type="button" ng-click = 'dodaj(jelo)' value="Dodaj"></div>
</div>
You can do it like so:
<input type=text name="kolicina{{idhrana}}"></div>
No need to explicitely concatenate it.
Also, I think you had a typo with nama versus the name-attribute.
http://plnkr.co/edit/uJcDZkrGNqzSibpgkTc9?p=preview
<input type=text name="kolicina {{idhrana}}">
working plnkr for understanding. hope this will help you.
I have an array like below
standardInput:any = [{val:'1'},{val:'2'},{val:'3'}];
When i loop it in my view
<div class="form-group row text-right" *ngFor='let row of standardInput' >{{row.val}}
<label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label>
<div class="col-sm-9 form-control-label m-t-5" for="password-h-f">
<div class="row">
<div class="col-sm-9" >
<input class="form-control" name="roles" [formControl]="form.controls['service_standard_sub_heading']" [(ngModel)]="row.val" id="email-h-t" type="email">
</div>
<div class="col-sm-3">
<button class="btn btn-danger" (click)="removeInputs('standard',i)">Remove</button>
</div>
</div>
</div>
</div>
The output is :3 3 3,it is showing only the last object in the array for the 3 iterations.I am not able to understand what's the reason.Can anyone please suggest help.Thanks.
I believe you are using template-driven form, if not, let me know and we can look at a solution for model-driven form :)
In forms, the name attribute needs to be unique. Even though the ngModel is unique, Angular doesn't really care about it, but looks at the name attribute instead. Since you are using a template-driven form and ngModel, I see no need to use formControl here, you can just rely on the the ngModel and name attribute instead. So, to get the unique name attribute, we can bind the row.val to it, like so:
[name]="row.val"
So your complete template would look like this:
<form #form="ngForm">
<div class="form-group row text-right" *ngFor='let row of standardInput'>
<input class="form-control" [name]="row.val" [(ngModel)]="row.val">
</div>
</form>
I have an angular 2 application, where i use a ngFor to handle an bunch of checkboxes. when i initialize this component i need to set the state of the checkbox based on weather an id excists in an array
<div *ngFor="let option of listOptionResponse.options" class="col-md-12">
<div class="col-lg-12">
{{option.headline}}
</div>
<div class="col-lg-2 col-md-2 ">
<input type="checkbox" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose">
</div>
</div>
In the component i have an array and if the options.id exists in this array i wanna set it to true.
I cannot think of a good way to do this, and i have been looking for some sort of init event to use, bu without luck.
(this has nothing to do whith the excisting (change) event)
I hope you can help, and thanks in advance
You can just bind to checked like
<input type="checkbox" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose"
[checked]="ids.indexOf(option.id) != -1">
Perhaps you could try this:
<input type="checkbox" [(ngModel)]="option.id" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose">
I am trying to pass an input name to ng-show.
When the input's name is not an array, this works just fine (if it's just 'entity' instead of 'entity[entity_name]'), but when there's an array it's not working.
something about this syntax - 'ng-show = "investForm.entity[entity_name].$error.pattern"' is wrong:
<form name="investForm">
<label>Entity Name</label>
<input name="entity[entity_name]" rc-forms ng-pattern="/^[A-Za-z]+$/" type="text" ng-model="invest.entity_name" ng-required="invest.is_entity" />
<div ng-show="investForm.entity[entity_name].$dirty && investForm.entity[entity_name].$invalid">
<span ng-show="investForm.entity[entity_name].$error.pattern">Error: Please use English characters only!</span>
</div>
</form>
I found this question pretty intriguing, so I've been Googling for a while.
Apperently your problem is a JavaScript syntax error and I found it here:
angularjs form can not refer to input control when input name is array
You can use square-brackets. You have to reference your form element like this:
investForm['entity[entity_name]'].$error.pattern
I don't think you can use square brackets for the form name. Try replacing it with an underscore or something:
<form name="investForm">
<label>Entity Name</label>
<input name="entity_entity_name" rc-forms ng-pattern="/^[A-Za-z]+$/" type="text" ng-model="invest.entity_name" ng-required="invest.is_entity" />
<div ng-show="investForm.entity_entity_name.$dirty && investForm.entity_entity_name.$invalid">
<span ng-show="investForm.entity_entity_name.$error.pattern">Error: Please use English characters only!</span>
</div>
</form>
Consider a form in Html:
<form action="demo_form.asp" method="get">
<div class="form-group" style="margin-top:7px;">
<label class=".... </label>
<input type="text" name="prefersite1" placeholder="http://www.website.com">
<input type="text" name="prefersite2" cla....;">
<input type="text" name="prefersite3" cl....">
<input type="text" name="prefersite4" c....">
<input type="text" name="prefersite5" cla....">
</div>
On using a 'submit' type button, is there a way to get appended prefersite_list[] or comma separated string in the url
The button I used is just:
<button type="submit">
Submit
</button>
I am working on django platform and use this url to extract variables by request.GET.get method in python. Is there a way to change name=prefersite[0], [1] etc so that I will get a single long string.
Instead of /?prefersite1=&prefersite2=&prefersite3=.. , I need a single /?prefersite=.
Using prefersite[] as name seems to be working for post forms, but I need to use get forms.