<div class="checkbox m-b-15" ng-repeat="list in chkArray.riskForHospitalization" >
<label>
<input type="checkbox" name="M1033" data-checklist-model="pi.risHost" data-checklist-value="list.value">
<i class="input-helper"></i>
{[{list.title}]}
</label>
I want to get the value of the selected checked item but when i submit the data model pi.risHost is undefined
Since your checkbox is inside ng-repeat, all the checkboxes inside the ng-repeat has same model. so use an array of models.
<div class="checkbox m-b-15" ng-repeat="list in chkArray.riskForHospitalization" >
<label>
<input type="checkbox" name="M1033"
data-checklist-model="pi.risHost[$index]"
data-checklist-value="list.value">
<i class="input-helper"></i>
{[{list.title}]}
</label>
Here pi.risHost is an array of model and if you checked the 2nd checkbox. then pi.risHost[1] will be true. and so on
Related
I have radio buttons bond with a model but when I select a radio-button of them, the model value does not get changed and the ng-change event does not get fired.
<div required-field="{{$ctrl.model.requiredField}}" ng-click="$ctrl.model.active = true">
<select required>
<option selected disabled hidden value="{{$ctrl.model.selected}}">
{{$ctrl.model.transport.length > 0 ? $ctrl.model.transport : $ctrl.model.generaltext}}
</option>
</select>
<div class="dropdown-list" ng-if="$ctrl.model.active">
<ul>
<li ng-repeat="car in $ctrl.model.cars">
<div class="radio">
<input type="radio" id="car-{{car.id}}" ng-value="car" name="car"
ng-model="$ctrl.model.transport"
ng-change="$ctrl.model.active = false"
>
<label for="car">
{{car.name}}
</label>
</div>
</li>
</ul>
</div>
I cannot find the reason for such a behavior.
Thanks in advance.
Radio buttons work for a multiple-choice selection. On/off would be a checkbox.
https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
I am trying to generate checkboxes with ng-repeat.After selecting a value from dropdown I am getting values based on value selected.But after I select any checkbox only first checkbox is getting checked.I am not able to select other checkboxes.Can anyone tell how to select any one checkbox or more than one so that I can bind that values based on ng-model.
Here is the html code
<div class="form-group" data-ng-repeat="collegesByType in
collegesByTypes">
<div class="be-checkbox">
<input data-ng-model="committee.collegeId" name="collegeId"
type="hidden"
value="0">
<input data-to-date="currently_todate386"
id="currently_checkbox386" class="currently" type="checkbox"
value="1">
<label for="currently_checkbox386">{{collegesByType.name}}</label>
</div>
</div>
Try Like this:
<div class="form-group" data-ng-repeat="collegesByType in
collegesByTypes track by $index">
<div class="be-checkbox">
<input data-ng-model="committee.collegeId[collegesByType.collegeId]" name="collegeId"
type="hidden"
ng-value="collegesByType.collegeId">
<input data-to-date="currently_todate386"
id="currently_checkbox386{{$index}}" class="currently" type="checkbox"
value="1">
<label for="currently_checkbox386{{$index}}">{{collegesByType.name}}</label>
</div>
</div>
I'm trying to display two ng-repeats showing the same array in two different formats: A simple list with checkboxes and the same list, with extended info and checkboxes.
The following example works fine in Angular.
<label ng-repeat="item in vm.items">
<input type="checkbox" ng-model="item.selected">
{{item.name}}
</label>
<div ng-repeat="item in vm.items">
<h1>{{item.name}}</h1>
<p>{{item.desc}}</p>
<input type="checkbox" ng-model="item.selected">
</div>
But if I use Material Design Lite, the checked state isn't updated, so when you click in one checkbox, the other one stills the same.
Real example:
<div ng-repeat="item in vm.items">
<div class="mdl-card__title" ng-style="{'background-image': 'url({{item.photo}})'}">
<h2 class="mdl-card__title-text">{{item.name}}</h2>
</div>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-{{$id}}">
<input type="checkbox" ng-model="item.selected" ng-change="vm.updateMDL()" class="mdl-checkbox__input" id="checkbox-{{$id}}">
<span class="mdl-checkbox__label">Select {{item.name}}</span>
</label>
</div>
And in the list:
<div ng-repeat="item in vm.items">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-list-{{$id}}">
<input type="checkbox" ng-model="item.selected" class="mdl-checkbox__input" id="checkbox-list-{{$id}}">
<span class="mdl-checkbox__label">{{item.name}}</span>
</label>
</div>
If I click one checkbox then the same one in the list, object's selected status gets toggled and the clicked checkbox doesn't change (since it didn't change to selected in the first place)
Anyone else facing this issue? Workarounds?
I am using using two ON/OFF switches in my program.When one switch is ON another switch will automatically OFF(vice versa).using angular, give me your suggestion.
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
yes it's possible with angular.
- save checkbox state to ng-model
- set selected state according to the model
- you can use a combination of ngTrueValue and ng-model like this
- utilise ng-init to set the initial value of the element
<input type="checkbox" name="someName" value="0" ng-model="someValue" ng-true-value="0" ng-init="someValue=0">
<input type="checkbox" name="someName" value="1" ng-model="someValue" ng-true-value="1">
this will swap the checked state between the two checkboxes.
do message me if I've misunderstood your intention.
Plunker
How can i make yes radio button to be checked on page load and show/hide the field-set accordingly. Currently on load radio button is checked but its not showing the fieldset.
Html
<form name="myform" class="form " novalidate >
<fieldset>
<span>Would you like a receipt sent to you?</span>
<ul class="vList">
<li>
<input type="radio" name="receiptConfirmation" id="receiptAffirm" ng-model="reciept" value="yes" ng-checked="true">
<label class="form__radioLabel" for="receiptAffirm:" >Yes</label>
</li>
<li>
<input type="radio" name="receiptConfirmation" id="receiptDeny" ng-model="reciept" value="no">
<label class="form__radioLabel" for="receiptDeny">No </label>
</li>
</ul>
</fieldset>
<fieldset class="fieldset" ng-show="reciept=='yes'">
<legend class="isVisuallyHidden">Email Receipt</legend>
<ul class="vList">
<li>
<label for="firstName" class="form__label">First Name</label>
<input id="Text4" class="form__input form__input--textfield" type="text" >
</li>
<li>
<label for="emailAddress" class="form__label">Email Address</label>
<input id="email1" class="form__input form__input--textfield" type="email">
</li>
</ul>
</fieldset>
</form>
Do not mix ng-checked with ng-model. Setting ng-checked will not update the model, it will just update the element's checked property. Instead set the ng-model reciept to the desired value.
Remove ng-checked from input:-
<input type="radio" name="receiptConfirmation" id="receiptAffirm"
ng-model="reciept" value="yes">
In your controller set the model:-
app.controller('MainCtrl', function($scope) {
$scope.reciept = "yes";
});
Demo
Just set $scope.reciept = 'yes'; in your controller?
You have spelt receipt wrong also.