After AngularJS update to 1.8, once I click and call DayTypechange(2) method, the radio button value does not update. Here is my html:
<div class="btn-group btn-group-sm col-xs-11 col-md-10 select topmargine">
<div class="col-xs-6 col-sm-6 select">
<input type="radio" name="response" ng-model="fullDay" ng-click='DayTypechange(1)' ng-class="{selected: fullDay}" class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="wholeDay" ng-value="'1'" />
<label class="col-xs-10 formtextNormal" for="wholeDay">Whole day(s)</label>
</div>
<div class="col-xs-6 select">
<input type="radio" name="response" ng-model="fullDay" ng-click='DayTypechange(2)' ng-class="{selected: !fullDay}" class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="partDay" ng-value="'0'" />
<label class="col-xs-10 formtextNormal" for="partDay">Part day</label>
</div>
</div>
You should consider using ng-change for input clicks like checkboxes, radios and selects.
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.confirmed = "No"
$scope.change = function() {
console.log('radio clicked of value ', $scope.confirmed)
};
}]);
<html ng-app='changeExample'>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script></head>
<body ng-controller="ExampleController">
<label><input type="radio" ng-model="confirmed" value="Yes" ng-change="change()" name='changer' /> Yes</label>
<label><input type="radio" ng-model="confirmed" name='changer' value="No" ng-change="change()" />NO</label>
<hr><div>Current radio = {{confirmed}}</div>
</body></html>
Related
I want to select multiple radio options.New to angularjs.
Steps to produce the issue:
Select any country from the 1st select menu -> Choose Reason A
Select any country from the 2nd select menu -> Choose Reason C
here the above Reason A option disappears and only Reason C is selected.
i want to hold the two different reasons for different countries section.
here is the fiddle
http://jsfiddle.net/Lini7/knfsv64m/8/
var app = angular.module('myApp', []);
app.controller('myController', function ($scope) {
$scope.showReasonA = function showReasonA(checkNoTin) {
console.log("print the notin value from data",this.item.noTin);
if (!this.item.country) return false;
var selectedCountry = this.item.country.country.toLowerCase();
var fourCountries = ["cayman islands", "albania"]
var isIt = fourCountries.indexOf(selectedCountry) >= 0;
console.log("print match country val",isIt);
console.log("get checknotin value before assign",checkNoTin);
if (checkNoTin) this.item.noTin = true;
console.log("final checknotin val",checkNoTin);
return isIt;
}
});
and the view
<body>
<div ng-app="myApp">
<div ng-controller="myController">
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
<label class="checkbox">
<input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
</label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
<div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
<div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
</label>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
<label class="item item-input input-margin">
<textarea ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
</label>
</label>
</div>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
</label>
</div>
</div>
</div>
</div>
<select name="country_0" ng-model="item.country" ng-options="" required="required" class="ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required ng-touched" style=""><option value="" selected="selected"></option><option label="AFGHANISTAN" value="object:835">AFGHANISTAN</option><option label="cayman islands" value="object:836">cayman islands</option><option label="ALBANIA" value="object:837">ALBANIA</option><option label="ALGERIA" value="object:838">ALGERIA</option><option label="AMERICAN SAMOA" value="object:839">AMERICAN SAMOA</option></select>
<div class="row">
<label class="checkbox">
<input type="checkbox" ng-model="item.noTin" ng-disabled="item.tin" ng-checked="showReasonA(true)" ng-required="item.noTin" name="checkboxNoTin"/>
</label><span translate="transactions.changeAddress.crs.yes.me_no_tin" style="margin-top: 10px" class="col-value"></span>
</div>
<div ng-if="item.noTin" class="row">
<div class="col padding-top-xs"><span translate="transactions.changeAddress.crs.select_reason" style="margin-bottom: 12px;" class="pol-value col-value"></span>
<div ng-if="item.country.tin == true" ng-init="item.reason = 0" class="row margin-bottom-medium">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="A" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason1"></span>
</label>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="B" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason2_title"></span>
<label class="item item-input input-margin">
<textarea ng-model="item.othersReason" ng-required="item.reason == 2" rows="5"></textarea>
</label>
</label>
</div>
</div>
<div ng-if="!showReasonA()" class="row margin-bottom-medium">
<div class="col">
<label class="radio-button">
<input type="radio" name="reason" ng-model="item.reason" ng-value="C" required="required"/><span class="indicator"></span><span translate="transactions.changeAddress.crs.yes.reason3"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
To make some input as hidden you can use
<p ng-show="condition">I'm shown</p>
and this condition value should be initialized in the scope of your controller
$scope.condition=true/false
to hide an show input you can use ng-if. Its better to use ng-if for dynamic inputs . see details here
Now for your case you can use item.reason in the condition to show and hide your input .
<input type="radio" name="reason" ng-model="item.other" ng-value="C" required="required" ng-if="item.reason='object:836'" />
Finally got the solution
I just added the radio button name with index then it worked which will give different names for each group of buttons.
name='reason_{{$index}}'
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script>
var app = angular.module('sampleapp', []);
app.controller('samplecontroller', ["$scope", function($scope) {
$scope.itemsToPush=[{amount:'',percentage:''}];
$scope.myFunction = function() {
$scope.itemsToPush.push({
amount:'',
percentage:''
})
};
}]);
</script>
</head>
<body ng-app="sampleapp" ng-controller="samplecontroller">
<div class="test" ng-repeat="items in itemsToPush">
<div class="form-group" style="margin-top: 20px;">
<label class="checkbox-inline">
<input type="radio" name="amount" value="amount" ng-model="items.amount"> Reduction Amount
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="radio" name="percentage" value="percentage" ng-model="items.amount"> Reduction Percentage
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
</label>
</div>
</div>
<div>
<button class="btn btn-secondary" type="button" ng-click="myFunction()">Go!</button>
</div>
</body>
</html>
Hi. I am working in angularjs. I have a div which contains two radio buttons(only one can be selected). I have a button called Go.On click Go i need to dynamically add the Radio div.The problem i am facing is when the div gets added,i am able to select only one radio from both(original and replicated) the divs.I need to select one radio button from each div. Thanks in advance.
Here's https://plnkr.co/edit/cLemG02uFyQupG7h74WM?p=preview
Hope I am understanding this correctly. Correct me if I am wrong.
You want each row to have two options.
1. Amount
2. Percentage
Of these only one can be selected.
To achieve this you need to have the same name attribute for both radio buttons.
<div class="form-group" style="margin-top: 20px;">
<label class="checkbox-inline">
<input type="radio" name="reductionType" value="amount" ng-model="items.amount"> Reduction Amount
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="radio" name="reductionType" value="percentage" ng-model="items.amount"> Reduction Percentage
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
</label>
</div>
Now based on the item selected you will have either amount or percentage in the items.amount binding.
If you want multiple rows of this then you should use different names for each row. For this the $index variable would be useful.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script>
var app = angular.module('sampleapp', []);
app.controller('samplecontroller', ["$scope", function($scope) {
$scope.itemsToPush=[{amount:'',percentage:''}];
$scope.myFunction = function() {
$scope.itemsToPush.push({
amount:'',
percentage:''
})
};
}]);
</script>
</head>
<body ng-app="sampleapp" ng-controller="samplecontroller">
<div class="test" ng-repeat="items in itemsToPush">
<div class="form-group" style="margin-top: 20px;">
<label class="checkbox-inline">
<input type="radio" name="reductionType_{{$index}}" value="amount{{" ng-model="items.amount"> Reduction Amount
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="radio" name="reductionType_{{$index}}" value="percentage" ng-model="items.amount"> Reduction Percentage
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
</label>
</div>
</div>
<div>
<button class="btn btn-secondary" type="button" ng-click="myFunction()">Go!</button>
</div>
</body>
</html>
The reductionType_{{$index}} creates a new radio button group for each iteration hence making only one clickable. (generates reductionType_0, reductionType_1 and so on)
<div class="test" ng-repeat="items in itemsToPush">
<div class="form-group" style="margin-top: 20px;">
<label class="checkbox-inline">
<input type="radio" name="reduction{{[$index]}}" value="amount" ng-model="items.amount"> Reduction Amount
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionAmount" style="width: 80px;">
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="radio" name="reduction{{[$index]}}" value="percentage" ng-model="items.amount"> Reduction Percentage
</label>
<label class="checkbox-inline" style="padding-left: 0px;">
<input type="text" name="reductiontext" value="" ng-model="items.reductionPercentage" style="width: 80px;">
</label>
</div>
you need to make same names of checkbox of one and add {{[%index]}},so on every increment each div has its own names of checkboxes
Good day!
So I trying to make Single Page App, but I am stuck with trying to hide/show div elements using checkbox. Since I was unsure how to make module, to hide/show elements, I used google to search up some tutorial, and found this code:
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = $scope.IsVisible ? false : true;
}
});
Unfortunately, when I try to apply this module to my html code, I always get this error:
Error: [ng:areq] Argument 'MyController' is not a function, got undefined
Here is my html code:
<div ng-app="MyApp" ng-controller="MyController">
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="field-6">{{"NOTES_INSPECTOR"| translate}}</label>
<span class="desc"></span>
<div class="controls">
<textarea class="form-control" cols="5" id="field-6" ng-model="comment"></textarea>
</div>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"PREPAYMENT"| translate}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="avans">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"THE_FINAL_PRICE"| translate}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="finalPrice">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group">
{{"ORDER_IS_USER_ORDER"| translate}}
<label class="iswitch iswitch-md bg-info">
<input type="checkbox" ng-model="IsVisible">
<i></i>
</label> {{"ALLOWED"| translate}}
</div>
</div>
Idea behind this html code is, whenever user presses button which is 4th div in the code, elements should appear, else, be hidden. Unfortunately it doesn't work. Any ideas why?
DEMO
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = $scope.IsVisible ? false : true;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="field-6">{{"NOTES_INSPECTOR"}}</label>
<span class="desc"></span>
<div class="controls">
<textarea class="form-control" cols="5" id="field-6" ng-model="comment"></textarea>
</div>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"PREPAYMENT"}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="avans">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group" ng-show = "IsVisible">
<label class="form-label" for="manager">{{"THE_FINAL_PRICE"}}</label>
<span class="input-group-addon">€</span>
<input type="text" class="form-control" ng-model="finalPrice">
<span class="input-group-addon">.00</span>
</div>
<div class="form-group">
{{"ORDER_IS_USER_ORDER"}}
<label class="iswitch iswitch-md bg-info">
<input type="checkbox" ng-model="IsVisible">
<i></i>
</label> {{"ALLOWED"}}
</div>
</div>
I need to set these three inputs disable
<input type="text" class="col-md-6" ng-model="a.one" name=""/>
<input type="number" class="col-md-6" ng-model="a.two" name="" ng-disabled="cm" required="required"/>
<div class='input-group date' id='date'>
<input type='text' ng-model="a.three" name="toDate" class="form-control" style="height:30px;" ng-disabled="cm" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
when I select one value from below input:
<select class="col-md-6 dropdown-height" ng-model="a.select" name="" ng-options="ms for ms in section" required="required"></select>
the option values inside the select input are coming from an api
scope.mapping = function () {
ApiServices.getAllValues().then(
function (response) {
scope.map= response.data;
});
};
How should I do it?
<input ng-disabled="a.select==='your_value'">
Do this for the three inputs.
Two ways you can do it.
1. apply ng-disabled="a.select" to the element you want to disable.
2. This is much better if you want to apply to more input fields.
Wrap your html inside fieldset and apply ng-disabled. Below is the working code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.cm = true;
$scope.enable= function() {
$scope.cm = !$scope.cm;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<fieldset ng-disabled="cm">
<input type="text" class="col-md-6" ng-model="a.one" name=""/>
<input type="number" class="col-md-6" ng-model="a.two" name="" required="required"/>
<div class='input-group date' id='date'>
<input type='text' ng-model="a.three" name="toDate" class="form-control" style="height:30px;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</fieldset>
<button ng-click="enable()">enable fields</button>
</div>
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>