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;
}
Related
I create a list of radio button selections, but the problem is that when clicked, they both remain selected, thus not working as a radio button group at all.
I have the same ng-model (a string; 'model') and ng-change for all of them, but the id is different.
<div class="radio-button"
ng-show="vm.forAdmins"
ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)" >
{{role.name}}
</div>
Been wrestling with this for a while now, can't see what I've missed.
Radio button will work as a group if you assign name property to those radio buttons. I was also facing this issue then I realized my mistake.
<div class="radio-button" ng-show="vm.forAdmins" ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)"
name="roles" >
{{role.name}}
</div>
Try assigning a name attribute to your radio button. name groups the radio button. For example :
<input type="radio" name="someRadio" id="radioOne" />
<input type="radio" name="someRadio" id="radioTwo" />
Now only one is selected at a time.
I have input text box to filter items from a dropdown Select list.
This works fine.
But there are two problems.
When data gets populated i want 1st item to be visible in dropdown.
As i type in filter box first matching among the list should be displayes in the dropdown control.
How do i achieve this?
<input type="text" id="fromSearchBox" class="form-control w-auto h-25"
ng-model="SearchEmployee" />
<select class="form-control" ng-model="fromManagerInfo">
<option ng-repeat="emp in employees|filter:SearchEmployee">
{{emp.EmployeeInfo}}
</option>
</select>
You can set the selectedItem using ng-model on ng-init
<input type="text" ng-init="SearchEmployee = employees[0]" id="fromSearchBox" class="form-control w-auto h-25" ng-model="SearchEmployee" />
and for filter you are already using the filter
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.
Problem: I have a grid for which I implemented Create&Update functionality. On create the user gets a modal dialog with some fields and a few drop-down lists (each drop-down is getting populating with data from the db).
The issue I have is with the update. If the user wants to update a record from the grid, he will select the row and click a button which will open a modal dialog that display all record fields in "non-editable mode". The fields will only become editable if the user click the button "Edit" at the bottom of the modal dialog. The question is: How to get the drop-down (i.e country list) to display only the data for that specific record in "non-editable mode" (let's say Ireland) and once the user will click the "Edit button" the drop-down to still show the same data(Ireland). Unless the user will click on the drop-down which then will show the entire list of countries so eventually can select a different one.
For the sake of example, I am going to post the current implementation for the country drop-down list. This is the code I am using on Create modal dialog, for the Update modal dialog it should be something similar but no idea on how to display the relevant country of the selected record from the grid.
Populate the country drop-down
<div class="control-group">
<label class="control-label">*Country</label>
<div class="input-append">
<div data-ng-init="getCountryDataFromServer()">
<b>Person Data:</b> <select id="countryId" ng-model="contact.countryId">
<option value="">-- Select Countries --</option>
<option data-ng-repeat="country in countries" value="{{country.countryId}}">{{country.countryname}}</option>
</select><br>
</div>
</div>
<div class="input-append">
<label>
<span class="alert alert-error"
ng-show="displayValidationError && newContactForm.countryData.$error.required">
<spring:message code="required"/>
</span>
</label>
</div>
</div>
Ng-Init Angularjs directive
//Load countries from JSON and populate the dropdown
$scope.getCountryDataFromServer = function() {
$http({method: 'GET', url: '/tool/protected/country/all'}).
success(function(data, status, headers, config) {
$scope.countries = data;
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
Please use ng-options to create a dropdown-list
<select class="form-control" ng-model="countries.selectedCountry"
ng-options="country in countries">
</select>
Now you only have to set with
$scope.countries.selectedCountry = "that country";
the country you would like to set.
Edit: I saw, you used contact.countryId as model. You also could use that, but you have to be sure that the value you set is exact the same as in the dropdown.
What I did was to create a input field to show the current country name. This field is set to ng-hide when the modal dialog is in the non-editable mode. If the user click the "edit" button instead of the field I get the drop-down list which is set to ng-show (if modal dialog is in editing mode). On the UI, user wont have a clue of whats happening but behind the scene is quite ugly I think...but still, is a solution to my problem.
Code
<div class="control-group" ng-class="{error: displayValidationError && updateContactForm.country.countryId.$error.required}">
<label class="control-label">*Country</label>
<div class="controls">
<input type="text" autofocus required ng-model="contact.countryId"
name="country.countryname"
placeholder="Status" ng-hide="editingUpdateForm" />
<div data-ng-init="getCountryDataFromServer()" ng-show="editingUpdateForm">
<select id="contact.country.countryId" autofocus required ng-model="contact.country.countryId">
<option data-ng-repeat="country in countries" value="{{country.countryId}}">{{country.countryname}}</option>
</select>
</div>
</div>
<div class="help-inline"
ng-show="displayValidationError && newContactForm.countryData.$error.required">
<spring:message code="required"/>
</div>
</div>
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