I am trying to disable a group of element using ng-disabled in its parent element. Doesn't seem to work.
Does it mean I have to using same condition in all child element to disable ?
I am not able to disable all elements by putting ng-disabled="true" with ul or li element. It works only when I put at input element. Is this how it works ? Also ng-disabled="true" doesn't work with lable or span !
<ul style="list-style:none">
<li>
<input type="radio" id="radio1" ng-model="color" value="red">
<label for="radio1" class=""><span>Red</span></label>
</li>
<li>
<input type="radio" id="radio2" ng-model="color" value="green">
<label for="radio2" class=""><span>Green</span></label>
</li>
<li>
<input type="radio" id="radio3" ng-model="color" value="blue">
<label for="radio3" class=""><span>Blue</span></label>
</li>
fiddle : http://jsfiddle.net/chiranjib_halder1/pqvz9veu/3/
You can use this directive:
https://github.com/pleerock/angular-disable-all.git
that basicaly picks the elements inside the directive and disable them.
here is your fiddle code using this directive:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://cdn.rawgit.com/pleerock/angular-disable-all/master/dist/angular-disable-all.min.js"></script>
<body ng-app="radioExample">
<script>
angular.module('radioExample', ['disableAll'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.color = 'blue';
$scope.specialValue = {
"id": "12345",
"value": "green"
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="isDisabled">Disable all<br>
<ul style="list-style:none" disable-all="isDisabled">
<li>
<input type="radio" id="radio1" ng-model="color" value="red">
<label for="radio1" class=""><span>Red</span></label>
</li>
<li>
<input type="radio" id="radio2" ng-model="color" value="green">
<label for="radio2" class=""><span>Green</span></label>
</li>
<li>
<input type="radio" id="radio3" ng-model="color" value="blue">
<label for="radio3" class=""><span>Blue</span></label>
</li>
<tt>color = {{color | json}}</tt><br/>
<button type="button">Click Me!</button>
</ul>
</div>
</body>
ng-disabled is used on input elements only. here, "checked" is used to enable the button after the checkbox has been checked. here is a hypothetic example:
Click me to toggle: <input type="checkbox" ng-model="checked"><br/>
<button ng-model="button" ng-disabled="checked">Button</button>
https://docs.angularjs.org/api/ng/directive/ngDisabled
Related
Am having multiple form on same page . That form contains product name and their prices for monthly ,quarterly. i used radio btn to select prices for either monthly or quarterly. But if user wants to subscribe for multiple product , how he/she can select radio btn for that product.Any solution?
HTML radio buttons are working with their names. So in case you want separate radio buttons for each product, each of your radio buttons has to have different name. So for example:
<!-- Product 1 -->
<input type="radio" name="product-1" value="monthly" /> Monthly<br/>
<input type="radio" name="product-1" value="quarterly" /> Quarterly<br/>
<!-- Product 2 -->
<input type="radio" name="product-2" value="monthly" /> Monthly<br/>
<input type="radio" name="product-2" value="quarterly" /> Quarterly<br/>
In case you want multiple selection, I suggest you to use checkbox instead of radio buttons.
<!-- Product 1 -->
<input type="checkbox" name="product-1" value="monthly" /> Monthly<br/>
<input type="checkbox" name="product-1" value="quarterly" /> Quarterly<br/>
<!-- Product 2 -->
<input type="checkbox" name="product-2" value="monthly" /> Monthly<br/>
<input type="checkbox" name="product-2" value="quarterly" /> Quarterly<br/>
With CSS it's possible to hide checkbox and style it so they look like radio buttons.
You can do it by checkbox on products too, this will helps you to select main product with one of option, for example:
product A and monthly And product B and quarterly
to get unique name you can use {{$index}} in ng-repeat as this sample
var app = angular.module("app", []);
app.controller("ctrl", function($scope, $filter) {
$scope.products = [
{monthly: 8000, quarterly: 18000},
{monthly: 9000, quarterly: 28000},
{monthly: 10000, quarterly: 38000},
{monthly: 11000, quarterly: 48000},
{monthly: 12000, quarterly: 58000}
];
$scope.get = function() {
var selectedProducts = $filter('filter')($scope.products, {selected: true});
console.log(selectedProducts)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<h3>multiple selecte with radio mode</h3>
<ul>
<li ng-repeat="product in products">
<input type="checkbox" ng-model="product.selected">
<label>
monthly: {{product.monthly}}
<input type="radio" name="type_{{$index}}" ng-value="0" ng-model="product.type">
</label>
<label>
quarterly: {{product.quarterly}}
<input type="radio" name="type_{{$index}}" ng-value="1" ng-model="product.type">
</label>
</li>
</ul>
<hr>
<h3>multiple selecte with checkbox mode</h3>
<ul>
<li ng-repeat="product in products">
<input type="checkbox" ng-model="product.selected">
<label>
monthly: {{product.monthly}}
<input type="checkbox" name="type_{{$index}}" ng-model="product.monthlySelected">
</label>
<label>
quarterly: {{product.quarterly}}
<input type="checkbox" name="type_{{$index}}" ng-model="product.quarterlySelected">
</label>
</li>
</ul>
<button ng-click="get()">get products</button>
</div>
In the example above, the radio buttons below the checkbox are activated when the checkbox is checked. I'd like to reset the radio buttons (so that no radio button is filled) when unchecking this checkbox.
<div class="checkbox checkbox-info">
<input id="icb" type="checkbox" ng-model="checked">
<label for="icb"><i class="fa fa-refresh"> </i><b>Integratie</b></label>
</div>
<div class="radio">
<input type="radio" name="irb" id="iarb" ng-disabled="!checked" value="!checked">
<label for="iarb">Administrator</label>
</div>
<div class="radio">
<input type="radio" name="irb" id="imrb" ng-disabled="!checked" value="!checked">
<label for="imrb">Medewerker</label>
</div>
Change radio button value to ng-model
HTML
<div class="checkbox checkbox-info">
<input id="icb" type="checkbox" ng-model="checked" ng-click="onCheck()">
<label for="icb"><i class="fa fa-refresh"> </i><b>Integratie</b></label>
</div>
<div class="radio">
<input type="radio" name="irb" id="imrb" ng-model="radio_checked" value="1" ng-disabled="!checked" />
<label for="iarb">Administrator</label>
</div>
<div class="radio">
<input type="radio" name="irb" id="imrb" ng-model="radio_checked" value="2" ng-disabled="!checked" />
<label for="imrb">Medewerker</label>
</div>
JS
$scope.onCheck = function(){
$scope.radio_checked = false;
}
Demo Fiddle
I am trying to create a custom popover with a html form in angularjs. The idea is that, when the user press the button with the popover, it shows 5 radio buttons inside. Each radio button has a message that is printed under the button when the radio button is checked.
Here is the directive code:
var customPopoverApp=angular.module('customPopOverApp',[]);
customPopoverApp.directive('customPopover',['$compile','$templateCache',function($compile,$templateCache){
return {
restrict:'A',
transclude:true,
template:"<span>Click on me to show the popover</span>",
link:function(scope,element,attr){
var contentHtml = $templateCache.get("customPopover.html");
contentHtml=$compile(contentHtml)(scope);
$(element).popover({
trigger:'click',
html:true,
content:contentHtml,
placement:attr.popoverPlace
});
}
};
}]);
Here is the main html template:
Popover test
<div class="navbar navbar-default menu-nav" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li>
<button custom-popover="" popover-place="bottom">click on me to show the popover</button>
</li>
</ul>
</div>
</div>
<script type="text/ng-template" id="customPopover.html">
<h2>Organizacion de la tabla</h2>
<div class="radio">
<label>
<input type='radio' ng-checked="option1" ng-click='showMessage("Option 1 checked")'/> Option 1<br/>
</label>
</div>
<div class="radio">
<label>
<input type='radio' ng-checked="option2" ng-click='showMessage("Option 2 checked")'/> Option 2<br/>
</label>
</div>
<div class="radio">
<label>
<input type='radio' ng-checked="option3" ng-click='showMessage("Option 3 checked")'/> Option 3<br/>
</label>
</div>
<div class="radio">
<label>
<input type='radio' ng-checked="option4" ng-click='showMessage("Option 4 checked")'/> Option 4<br/>
</label>
</div>
<div class="radio">
<label>
<input type='radio' ng-checked="option5" ng-click='showMessage("Option 5 checked")'/> Option 5<br/>
</label>
</div>
</script>
<div ui-view></div>
and here is the plunker with the full example:
http://plnkr.co/edit/ccb5MR?p=preview
The popover works fine... the first time. If I close the popover and I open again, It is as if it had never been compiled
Does any of you know why the popover does not work the second time?
<div class="radio-inline" ng-repeat="customerOption in customerOptions">
<input type="radio" name="customer" ng-change="getCustomers(customerType)" ng-model="customerType" ng-value="customerOption.Key" ng-checked="customerOption.Checked" />{{customerOption.Value}}
</div>
This doesn't seem to do anything:
ng-attr-id="{{customerOption.Value}}"
or:
ng-attr-id="customerOption.Value"
or:
id="customerOption.Value"
These puts exactly that line in the html
That's a quick plunker to show use of ng-model for default radio
http://plnkr.co/edit/F3M2fzLaYYrIwQdtuwHT?p=preview
app.controller('MainCtrl', function($scope) {
$scope.gender = 'female';
});
<body ng-controller="MainCtrl">
<input type="radio" name="sex" value="male" ng-model="gender">Male
<br>
<input type="radio" name="sex" value="female" ng-model="gender">Female
</body>
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.