I am trying to iterate the radio buttons using ng-repeat. All the radio buttons are visible perfectly with first radio button checked, but when I try to select the other radio buttons, radio buttons are not clickable. can anybody please help me out what I am missing here..!!
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4" name="optionsRadiosA" value="option4" checked="">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
corrected html
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{n}}" name="optionsRadiosA" value="{{n}}" checked="">
<label class="form-label" for="rb4_{{n}}">{{n}}</label>
</div>
</div>
</div>
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{$index}}" name="optionsRadiosA" ng-model="radioVal[$index]">
<label class="form-label" for="rb4_{{$index}}">{{n}}</label>
</div>
</div>
</div>
I have added ng-model="radioVal_{{$index}}" in each of input iteration, why because it's ng-model who will contain current ng-value of your radio buttons. Try it, and get back to me.
and Id's are dynamically generated now.
Working Now!!!!!!
You need to fix the following issues:
The model must exist in parent scope. To do this, use ngInit to initialize an ngModel outside of your ngRepeat: ng-init="selected = { number:0 }"
All radio button controls must bind to the same ngModel. Add an ngModel to your input control, and bind it to the ngModel that you declared in parent scope: ng-model="selected.number"
Display different values for each radio button: value="{{n}}"
NOTE: Remember, ngRepeat creates a child scope for each iteration.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="selected = { number:0 }">
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" ng-model="selected.number" type="radio" value="{{n}}">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
{{ selected }}
</div>
You should have different ng-model for each radio element, you could do it by using ng-model="radio[$index]"
Markup
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4-{{$index}}" name="optionsRadiosA" ng-value="option4" ng-model="radioVal">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
Related
So i have this html. The issues is that is changing the model(filter) when i select one of those that i have create in a static way but the dynamic ones does not trigger the change of the value. Any ideas?
Thanks.
<div class="row">
<div class="col-xs-6">
<h3>Group 1</h3>
<hr>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="5"><label>5</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="4'"><label>4</label>
</div>
</div>
<div class="col-xs-6">
<h3>Group 2</h3>
<hr>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="3"><label>3</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="2'"><label>2</label>
</div>
<div class="checkbox">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="1"><label>1</label>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h3>DinamicItems</h3>
<hr>
<div class="checkbox" ng-repeat="item in items">
<input type="radio" name="filterGroup" ng-model="filter" ng-value="'{{item.value}}'"><label>{{item.text}}</label>
</div>
</div>
</div>
What Charlie is saying is, your model of tag is a primitive one. Each instance of ng-repeat creates it's own scope. Therefore, your models, although named 'tag', are not in fact the same.
To remedy, you should make your model something like vm.tags (vm = view model.)
A few things to read up on, and learn more:
Controller As: https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/
ng-repeat: https://docs.angularjs.org/api/ng/directive/ngRepeat
Understanding Scopes https://github.com/angular/angular.js/wiki/Understanding-Scopes (When I was getting started with Angular, I had to read through this a few times, and still do on occasion)
I have a list of animals and there are 2 sets of radio buttons against each animal- extinct(y or n), habitat(land or water).
If user selects extinct as y for an animal then habitat radio buttons get disabled.
If user selects extinct as n, then habitat radio button will be enabled and user can select either land or water as habitat.
And on change of value of the radio button I call a function, where I am getting the selected value. Now the problem is for both radio buttons I get the same value ie (y or n). How to get proper values ie y or n for extinct and land or water for habitat.
here is the code.. i have modified the names.
HTML content
<fieldset>
<legend>List of Animals</legend>
<div class="row" ng-repeat=" animal in animals">
<label class="col-md-2 text-info">{{ animal }}:</label>
<label class="col-md-1 text-info"> Extinct</label>
<div class="col-md-1">
<input id="{{animal}}extinctY" type="radio" name="{{animal}}extinct" data- ng-model="value" value="{{animal}}|Y" ng-change="getExtinct(value1)"/>
</div>
<label class="col-md-1 text-info">Y</label>
<div class="col-md-1">
<input id="{{animal}}extinctN" type="radio" name="{{animal}}extinct" data-ng-model="value" value="{{animal}}|N" ng-change="getExtinct(value1)" required="required"/>
</div>
<label class="col-md-1 text-info">N</label>
<label class="col-md-1 text-info"> Habitat</label>
<div class="col-md-1">
<input id="{{animal}}habitatL" type="radio" name="{{animal}}habitat" ng-checked="{{animal}}checked" ng-model="value" value="{{animal}}|L" ng-disabled="{{animal}}disabled" ng-change="getHabitat(value)"/>
</div>
<label class="col-md-1 text-info">Land</label>
<div class="col-md-1">
<input id="{{animal}}habitatW" type="radio" name="{{animal}}habitat" ng-checked="{{animal}}checked" ng-model="value" value="{{animal}}|W" ng-disabled="{{animal}}disabled" ng-change="getHabitat(value)"/>
</div>
<label class="col-md-1 text-info">Water</label>
</div>
<br/>
</fieldset>
JS content
$scope.animals= ['Zebra', 'Dinosaur', 'Whale', 'Antilon'];
$scope.getExtinct= function getExtinct(extinct) {
alert(extinct); // Here it displays Zebra|N
};
$scope.getHabitat = function getHabitat(habitat) {
alert(habitat); // Here also it displays Zebra|N instead of Zebra|L
};
The easiest way to get around this is to make the animals. I created a plunkr to demonstrate. http://plnkr.co/edit/s45WEnCbRvBL2CRmjbut?p=preview
Then you can evaluate the ng-disabled, ng-value, etc. using the keys.
<fieldset ng-controller="AnimalCtrl">
<legend>List of Animals</legend>
<div class="row" ng-repeat=" animal in animals">
<label class="col-md-2 text-info">{{ animal.name }}:</label>
<label class="col-md-1 text-info"> Extinct</label>
<div class="col-md-1">
<input type="radio" name="{{animal.name}}extinct" ng-model="animal.extinct" value="true" />
<label class="col-md-1 text-info">Y</label>
</div>
<div class="col-md-1">
<input type="radio" name="{{animal.name}}extinct" ng-model="animal.extinct" value="false" required/>
<label class="col-md-1 text-info">N</label>
</div>
<label class="col-md-1 text-info"> Habitat</label>
<div class="col-md-1">
<input type="radio" name="{{animal}}habitat" ng-model="animal.habitat" value="land" ng-disabled="animal.extinct == 'true'" />
<label class="col-md-1 text-info">Land</label>
</div>
<div class="col-md-1">
<input type="radio" name="{{animal}}habitat" ng-model="animal.habitat" value="water" ng-disabled="animal.extinct == 'true'" />
<label class="col-md-1 text-info">Water</label>
</div>
</div>
</fieldset>
I have an ng-repeat to iterate over form fields.
The problem is, if I have an invalid form I don't get any feedback. I don't see the span, nor do I see has-error get applied to the div.
I must be missing something simple, can anyone see what it is?
Here's the ng-repeat code:
<div ng-repeat="i in items">
<ng-form novalidate class="user-form" name="userForm">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">{[{ i.item }]}</label>
<input-field item="i"></input-field>
<span ng-show="userForm.userInput.$invalid">TEST</span>
</div>
</ng-form>
</div>
Which generates an entry like this:
<div ng-repeat="i in items">
<ng-form novalidate="" class="user-form" name="userForm">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">Username</label>
<input name="userInput" class="form-control" type="text" ng-model="item.answer" placeholder="Username" required>
<span ng-show="userForm.userInput.$invalid" class="ng-hide">TEST</span>
</div>
</ng-form>
</div>
You want create more than one "userForm"?
If not you can change it to
<ng-form novalidate class="user-form" name="userForm"> <div ng-repeat="i in items">
<div class="form-group has-feedback" ng-class="{'has-error':userForm.userInput.$invalid}">
<label class="control-label">{[{ i.item }]}</label>
<input-field item="i"></input-field>
<span ng-show="userForm.userInput.$invalid">TEST</span>
</div> </div>
</ng-form>
Hope it helps.
http://www.bootply.com/9WB3SixQNr
<div class="form-group">
<label class="col-sm-2 control-label">Text</label>
<div class="col-sm-10">
<div class="checkbox">
<label class="checkbox-inline">
<input id="123" name="Checkbox" value="a" type="checkbox">
</label>
</div>
</div>
</div>
The "Text" is not aligned with the checkbox. The checkbox is slightly below the Text. How do I make them both on the same line? The "Text" is not exactly a label, If I add a label after the input tag the alignment is okay(I see other questions with aligning the label and checkboxes, this is different).
I want the "Text" to be display on the left correclty in line with checkbox.
You're not dealing with columns in bootstrap right.
This code worked for me :
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-2 ">
<label class="control-label">Text</label>
</div>
<div class="col-sm-10">
<label class="checkbox checkbox-inline">
<input id="123" name="Checkbox" value="a" type="checkbox">
</label>
</div>
</div>
</form>
</div>
And this is the CSS to make the two elements inside the divs stick side by side :
.checkbox{
float:left;
}
.control-label{
float:right;
}
Here's a link for it : DEMO
I am trying to show a div depending on what is selected from the drop down list. For example, if a user selects 'Cash' from the list show Cash div or if the user select 'Check' from the list show Check div
I have put together sample but its incomplete and needs to wire-up
http://jsfiddle.net/abuhamzah/nq1eyj1v/
Also when the user change the selection I would also like to clear the previous selection so when the user goes back to the previous selection they should not see.
<div ng-controller="MyCtrl">
<div class="col-xs-12">
<label class="col-xs-6 control-label">Type:</label>
<div class="col-xs-6">
<select name="type" ng-model="payment.type" ng-dropdown required ng-change="changeme()" >
<option ng-option value="Cash">Cash</option>
<option ng-option value="Check">Check</option>
<option ng-option value="Money Order">Money Order</option>
</select>
</div>
</div>
<div class="col-xs-12" id="cash">
<div >
<label class="col-xs-6 control-label">Cash :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.cash" />
</div>
</div>
</div>
<div class="col-xs-12" id="check">
<div >
<label class="col-xs-6 control-label">check :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.check" />
</div>
</div>
</div>
<div class="col-xs-12" id="money_order">
<div >
<label class="col-xs-6 control-label">money_order :</label>
<div class="col-xs-6">
<input type="number" class="form-control" ng-model="payment.money_order" />
</div>
</div>
</div>
</div>
//controller:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.changeme = function() {
alert('here');
}
}
you didnt initialize as the angular app coz u missed the ng-app directive first
and this is the solution using ng-if
DEMO
<div ng-app="myApp" ng-controller="MyCtrl"> // initialize as a angular app
<div class="col-xs-12" id="cash" ng-if="payment.type == 'Cash'"> // this div will show if the value of `payment.type` model equals to `cash`. and so on.