Hi I am new to angular js.
I want to know how to disable drop down when checkbox is unchecked in angular js.this is the code i have been trying...
Click me:
<input type="checkbox" ng-model="checked"><br/>
<div>
<div class="check-element animate-hide" ng-show="checked">
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
By having checked defined as your checkbox's model you can just that to control whether the select (drop down) is disabled using that variable on your controller's scope.
<select ng-model="myDropDown" ng-disabled="!checked">
make sure you use the negation of checked since you want it to be disabled when the checkbox is not checked.
PLNKR example
You can do:
<select ng-model="myDropDown" ng-disabled="!checked">
Use ng-disabled conditionally on if the ng-model for your checkbox is true or false
So, this is a real quick example. Below I have a select box. You can use ng-disabled="EXPRESSION" to dynamically disable stuff.
<select ng-model="dropdown" ng-options="item.name for item in dropdown" ng-disabled="!checked">
<input type="checkbox" ng-model="checked">
Just set the expression to check the variable that is true/false on your checkbox. When it is false (unchecked) your dropdown will be disabled
Related
This is my page when I click on Edit the dropdown is not selected with value in the dropdown list ... Image
In edit mode i got like this ... Image
Dropdown shown with values... Image
I need like this ... Image
Here is my angular code:
<select class="form-control form-control-sm form-control-Cutom-height" id="dropdown" style="height: 38px;" ng-model="suppliment.PurchaseTypeId">
<option ng-repeat="Supple in PTSupplement" ng-selected="{{ Supple.PurchaseTypeId == suppliment.PurchaseTypeId }}" value="{{Supple.PurchaseTypeId}}" >
{{Supple.PurchaseType}}
</option>
</select>
Please help me :)
It appears as if when you display the dropdown, the your value is not be populated as the selected value properly. When using <select> in AngularJS, you can specify the ng-options attribute and use that to generate all of the <option> fields for you without doing the ng-repeat that you're doing.
From the AngularJS docs regarding the use of ngSelected:
Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected options.
Instead use the following:
<select
class="form-control form-control-sm form-control-Cutom-height"
id="dropdown"
style="height: 38px;"
ng-model="suppliment.PurchaseTypeId"
ng-options="Supple.PurchaseTypeId as Supple.PurchaseType for Supple in PTSupplement">
</select>
I have a dropdown and a radio button beside it. When an item is selected in the dropdown
and a user clicks on the radio button, I will like the dropdown to reset itself and have
"Select Number" as the default value.
How can i acheive that?
<div class="selection">
<label for="accountNumber" class="lbl">#T("Customer Account:")</label>
<select id="accountNumber" class="sel" name="accountNumber" ng-model="vm.defaultValue"
ng-options="item for item in vm.retrieveAliasName">
<option value="">Select Account</option>
</select>
</div>
<div id="acctsAll" class="all">
<input type="radio" id="AllAccounts" /><span class="lbl">("All")</span>
</div>
First of all you have to assign your input of type radio a model via ng-model directive. Then you have to check wether this model value matches the "All" value and clear default value of your vm.defaultValue.
Moreover if I get it right you need to clear and disable the select input when "All" radio is selected, but you might need an other radio which allows user to choose an option from select input. Based on that I've created this fiddle to help you out.
Notice the following parts:
<input ng-change="vm.clearDefaultValue()" ng-model="vm.areAllSelected" type="radio" id="AllAccounts" ng-value="true" />
and controller function:
this.clearDefaultValue = function() {
this.defaultValue = null;
}
Following is my code snippet. I want to validate my select box using angular.
<form name="myForm">
<select name="category_1" ng-model="catid" id="category_1" ng-options="category.catid for catid in categories" required>
<option value="" selected=""></option>
<option value="1">music</option>
<option value="2">internet</option>
</select>
<button ng-disabled="!myForm.$valid" ng-click="uploadPic(picFile)">Submit</button>
</form>
but can not submit the form I got this error in chrome,,and submit button is not working
An invalid form control with name='category_0' is not focusable.
here is the plunker
The problem is not the select box, maybe the problem is that you have another select box (with name category_0) or other input field (with name category_0), which has the required attribute and it is hidden or is not visible.
So when you try to submit your form, it tries to focus it, but is not possible. Make sure that the element with name category_0 is not inside an ng-hide block, or inside an ng-show with a false condition.
In my form i got a dropdown with Yes / NO option , when user selects yes additional input box will be displayed and allows user to enter some value input box.
how can i validate input box using angularjs ngmessages only if it is visible or value in dropdown is 'Yes'?
html code
<div class="col-xs-8">
<select ng-model="userAvailable">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
<input ng-show="userAvailable == 'yes'" placeholder="If yes , add name?" type="text" class="form-control" />
</div>
Thanks in advance.
Try using ng-if instead of ng-show. ng-show removes it from the DOM so the validation doesn't execute on it. ng-show just hides it.
<input ng-if="userAvailable == 'yes'" placeholder="If yes , add name?" type="text" class="form-control" />
I have an issue in dynamically creating select dropdown in angular js, changing one dropdown option make changes on the rest of the dropdowns. My requirement is to use same data option in all dropdown and to get the selected option in each dropdown. How do I over come this problem?
example:
<div ng-repeat ="option in options">
<select class="form-control input-lg" ng-model='newcategory.option'
ng- change="optsChanged()"required ng-options='option.value as option.name for option
in useroptions'>
</select>
<div>
I need to create a dropdown for each row of a table that has the same options, but it should be a different instance or different model to be assigned dynamically.
use the index as the subscript for the ng-model ng-model='newcategory.option[$index]'.. currently you are using the same ng-model for all the select boxes which is causing the issue
<div ng-repeat ="option in options">
<select class="form-control input-lg" ng-model='newcategory.option[$index]'
ng-change="optsChanged()"required ng-options='option.value as option.name for option in useroptions'>
</select>
<div>