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>
Related
Thank you.
In my form there are some dynamic input text boxes created by using ng-repeat. How to get the values of these text boxes when submit the form using Angular js?
<form ng-submit="submit()">
<div ng-repeat="opt in option">
<input type="text" name="">
</div>
</form>
Not sure of what you want but guess this will help you
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="data[$index].Name" ng-repeat="num in numbers track by $index"/>
<p ng-repeat="dataObj in data track by $index">
{{dataObj.Name}}
</p>
</div>
I have created a fiddle here
Use ng-model to bind the input values and $index for that particular index in the repeated values.
$scope.inputData = [];
inputData will have the binded values.
<form ng-submit="submit()">
<div ng-repeat="opt in option">
<input type="text" name="" ng-model="inputData[$index]">
</div>
</form>
<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
I am trying to follow the angular docs for radio buttons.
https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
Don't know what I'm doing wrong.
Ultimately, I want the div "stuff" to have class "muted" if radio option 3 is selected.
my html:
<form name="shippingVm.MasterCartonForm" ng-controller="shippingControler as shippingVm" >
[{{shippingVm.shipOption.val}}]
<div class="col-sm-3 col-sm-offset-1">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shippingOptions" ng-value="one" />
I will call Purolator for a pickup.
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="two" />
I will deliver them to Purolator.
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" ng-model="shippingVm.shipOption.val" name="shipOptions" ng-value="muted" />
I will deliver them to the Wizmo warehouse myself.
</label>
</div>
<div class="ng-class="shippingVm.shipOption.val">
stuff
</div>
</form>
my controller:
vm.shipOption = {val: "NOT-muted"};
This debugging line in the HTML checks to see if I'm getting the right value:
[{{shippingVm.shipOption.val}}]
It starts with [NOT-muted] - as it should. But the moment I select any radio button it goes blank.
According to the docs, clicking a radio should pass the radio's value into the model.
What am I missing?
Your ng-class is incorrect. See the below snippet for an example of what it should be. The second problem is that you want value instead of ng-value. From: https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
value The value to which the ngModel expression should be set when selected. Note that value only supports string values, i.e. the scope model needs to be a string, too. Use ngValue if you need complex models (number, object, ...).
ngValue Angular expression to which ngModel will be be set when the radio is selected. Should be used instead of the value attribute if you need a non-string ngModel (boolean, array, ...).
.muted {
color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<label>Chicken or the Egg?</label>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">Chicken
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">Egg
</label>
</div>
</div>
<div ng-class="{'muted': formData.chickenEgg === 'egg'}">
stuff
</div>
</div>
Oh, I see it now.
The radio buttons should have value="muted" not ng-value="muted".
ng-value is only used in a special case.
I have multiple input elements and I want one ng-model for them all, but when I use the model with ng-show it is not that sensitive , so how can I go .
<form ng-model="yes">
<input type="checkbox">1</input>
<input type="checkbox">2</input>
<input type="checkbox">3</input>
</form>
i.e I have multiple checkboxes and I want them all ticked to show another element
What do you mean with "sensitive"?
This should work if you want to set boolean properties:
<form name="myForm">
<input ng-model="myModel.prop1" type="checkbox" value="1">
<input ng-model="myModel.prop2" type="checkbox" value="1">
<input ng-model="myModel.prop3" type="checkbox" value="1">
</form>
But if you mean different options for one model you have to use radio buttons:
<form name="myForm">
<input ng-model="myModel.prop1" type="radio" value="1">
<input ng-model="myModel.prop1" type="radio" value="2">
<input ng-model="myModel.prop1" type="radio" value="3">
</form>
You can debug your model by putting {{myModel}} somewhere in the source code, so you will see immediately the effect of your changes
<form name="myForm">
<input ng-model="myModel1" type="checkbox">Option A <br/>
<input ng-model="myModel2" type="checkbox">Option B <br/>
<input ng-model="myModel3" type="checkbox">Option C <br/>
<div ng-show="(myModel1 && myModel2 && myModel3)">ABC</div>
</form>
Demo
I am using angularjs in my project.
I have below code in my HTML:
<div class="MT10" ng-init="getPaymentDetailsById()">
<div class="panel">
<div class="form-group">
<label> Name:</label>
<span class="rightside">
<input type="text" value="" ng-model="singleGatewayDetails.name" >
</span>
</div>
<div class="form-group">
<label> APP :</label>
<span class="rightside">
<input type="text" value="" ng-model="paymentDetails.id" ng-disabled="appId">
</span>
</div>
<div class="form-group">
<label> APP KEY:</label>
<span class="rightside">
<input type="text" value="" ng-model="singleGatewayDetails.appKey" >
</span>
</div>
<div class="form-group">
<label> APP SECRET:</label>
<span class="rightside">
<input type="text" value="" ng-model="singleGatewayDetails.appSecret">
</span>
</div>
</div>
</div>
now
<span class="rightside">
<input type="text" value="" ng-model="paymentDetails.id" ng-disabled="appId">
</span>
This code displays some data in my textbox. And I want to display that data in textbox in both scenario, that is while editing and while posting new data to server. So it just displays it while editing but not when I want to post new data to server. Basically this textbox will always have some value pre-filled in it. So i am guessing I have to use some condition on that. So please help me how to achieve that.
I think I know what you are getting at. Without seeing your JS file it would be very hard to give you a good example, however using $scope.value in your JS and setting the text to {{value}} in your HTML should provide the desired result.
Now that I understand your question, you could do this:
<input type="text" ng-model="paymentDetails.id" ng-disabled="appId" ng-show="adding"/>
<span ng-hide="adding">{{paymentDetails.id}}</span>
And then in your controller you could control the variable:
$scope.adding = true
and set it to false based on some condition