I want to create a a 3 radio button groups each having its own unique model using one ng-repeat. How can I achieve this?
<div class="radio" data-ng-repeat="item in selItem.items" >
<label class="control-label">
<input type="radio"
data-ng-value={{item.vm}}
data-ng-model="????"
name="{{selItem.Title}}"/>{{item.dm}}
</label>
</div>
First and foremost, why would you do that? Radio buttons are for a unique selection among a group of options, so having the same model for all radio buttons is the way to go.
However, for setting unique ng-models for each item iteration inside ng-repeat, you have to use object bracket notation, using $index or a property of each iteration itself to name the property of the object model.
<div ng-repeat="item in items">
<input type="text" ng-model="myModel[item.name]" >
</div>
check this fiddle to see it working
Related
I have a working form select like this in angularjs.
<select ng-model="selectedProduct"
ng-options="product as product.text for product in products">
</select>
I want to change this to radio buttons, since there are only two options in products. The UI will improve from it. The output from above are select options with value=0 and value=1.
I tried this:
<div ng-repeat="product in products">
<input id="{{product.productId}}" type="radio"
name="BlahBlah" ng-value="{{$index}}" ng-model="selectedProduct" required />
<label for="{{product.productId}}">
{{product.text}}
</label>
</div>
The $index renders value=0 and value=1 for the radio buttons, just like the select options. But it doesn't work. The data is not picked up and passed along by the controller. I would prefer not to rewrite things in the controller, if possible.
I thought this would be super-easy :-/
How can I move forward here?
Your select's ng-model is a product object, not 0 or 1. The equivalent would just be
<input type="radio" name="BlahBlah" ng-value="product" ng-model="selectedProduct" />
Demo: http://plnkr.co/edit/OLfcAwv4wEX2K3mAxBxK?p=preview
Is there a way to avoid IDs while creating elements i.e. using ng-model it is easier to validate form fields and other stuff?
<div ng-repeat="x in TestData">
<input type="text" id="nameField-{{$index}}"/>
</div>
The above code will display the number of input boxes equal to the length of the TestData array where every text box will have a unique id "nameField-0", "nameField-1" and so on, using these IDs we can take the textbox values, validate the fields etc.
<div ng-repeat="x in TestData">
<input type="text" ng-model=""/> <!-- what shall be done here to have unique IDs -->
</div>
Although going with IDs is working fine for me but as far as I can understand If I use IDs then that will not be a pure angular way (or IDs cannot be replaced by mg-models), correct me If I am wrong.
You don't need to grab element with id/name/etc. You can use ng-model to bind your values and ng-pattern to validate them.
<div ng-repeat="x in testData">
<ng-form name="tForm">
<input type="text" name="tInput" ng-model="x.name" ng-pattern="/^[A-Z]*$/" />
<span ng-if="tForm.tInput.$error.pattern" style="color:red">Invalid!</span>
</ng-form>
</div>
See this jsbin.
In your controller add this,
$scope.nameField = [];
in ng-reapeat add this,
<div ng-repeat="x in TestData">
<input type="text" ng-model="nameField[$index]"/>
</div>
nameField will be an array with all your values.
<div ng-repeat="x in TestData" ng-init='this["nameField-"+x]'>
<input ng-model='this["nameField-"+x]'/>
</div>
You use ng-init to add new variables to the controller, "this" refer to your scope, and since the scope is an object, since this[bla] == this.bla tou are actually saying, add to my scope a variable name "nameField=" and you add the x value.
after you have created your variable, just use it in the same way in your ng-model.
If you want to show your variable's value in any div/span, just use it via ng-bind:
<div ng-bind='this["nameField-"+x]'></div>
Following is the code I am using to populate the checkbox list.
<label class="checkbox-inline" ng-repeat="item in vm.ItemList track by item .id">
<input type="checkbox" name ="item " ng-value="item .id" ng-model ="vm.selecteditem" />{{item.name}}
</label>
The above code selects all the items in ItemList. I need to select only one item from itemList. How do I do that?
https://vitalets.github.io/checklist-model/
This link worked for me!
1) set checklist-model instead of ng-model
2) set checklist-value instead of ng-value
You're attaching the same externalized variable vm.selectedItem to every checkbox. Because of this, when you check one it changes that variable to true in turn selecting all of the checkboxes because they are bound to the same variable which is now true.
My advice to you would be to attach a selected property to each item in ItemList. Then have that attached to the ng-model as shown below.
<label class="checkbox-inline" ng-repeat="item in vm.ItemList track by item .id">
<input type="checkbox" name ="item " ng-value="item .id" ng-model= "item.selected" />{{item.name}}
</label>
I'm trying to get multiple values selected form a checkbox list generated using ng-repeat in anguler
<div ng-repeat="item in items">
<input type="checkbox" ng-model="model.ID" ng-true-value="'{{item.ID}}'" ng-false-value="''"/>{{item.Name}}
</div>
But what I want is to have different ng-models for different check boxes. How can I do that. Is there a way to do what ng-repeat does with out using ng-repeat
In Angular one checkbox is linked with one model, but in practice we usually want one model to store array of checked values from several checkboxes.
Checklist-model solves that task without additional code in controller. examples
use $index as key
<div ng-repeat="item in items">
<input type="checkbox" ng-model="model[$index].ID"/>{{item.Name}}
</div>
or use item unique id:
<div ng-repeat="item in items">
<input type="checkbox" ng-model="model[item.ID]"/>{{item.Name}}
</div>
I Have several categories (behavior ...) and one category has several criteria (communication ...) :
{
"behavior": [ "communication", "autonomy", "creativity" ],
...
}
I want to create one radios group for each criterion.
So i use two nested loops (ng-repeat) to create all radio button.
<input type="radio" name="{{key}}_{{item}}" value="0" data-ng-model="record[key][item]" /> good
See jsfiddle.
I try to initialized all radio button but without success.
My three buttons should be checked, but are not.
Is it the same problem than :
Arrays of strings not being handled properly within ng-repeat
I don't understand ...
Here is solution, you can not have a single form in two ng-repeat you need to use two different form for two ng-repeat, one would be innerForm and the other one would be outerForm, & then there would n number of innerForm inside outerForm.
HTML
<div ng-controller="MyCtrl">
<div data-ng-repeat="(key, array) in list">{{ key }} :
<ng-form name="outerForm">
<div data-ng-repeat="item in array">{{ item }} :
<ng-form name="innerForm">
<input type="radio" name="radioInput" value="0"
data-ng-model="record[$parent.key][item]" />good
<input type="radio" name="radioInput" value="1"
data-ng-model="record[$parent.key][item]" />bad
</ng-form>
</div>
</ng-form>
</div>
<hr/>all : {{ record | json }}
</div>
Working Fiddle