I have two dropdown lists. List1 has options a, b, c, d. List2 has options e, f, g, h. I want when a in List1 is selected. The value in List 2 should be e and at the same time disable the selection in List2. I would like to know how I can implement it? Thanks in advance!
<div class="form-group">
<label>List1 </label>
<div class="col-sm-6">
<select class="form-control" ng-model="list1">
<option ng-repeat="option in list1Choice" value={{option}} ng-selected="option == list1" ng-bind="option"></option>
</select>
</div>
</div>
<div class="form-group">
<label>List2 </label>
<div class="col-sm-6">
<select class="form-control" ng-model="list2">
<option ng-repeat="option in list2Choice" value={{option}} ng-selected="option == list2" ng-bind="option"></option>
</select>
</div>
</div>
Here is one way to do it.
http://jsfiddle.net/muw4aect/
There are two key elements. One, the ng-disabled directive in the second select.
//when $scope.select1 is equal 'a'
ng-disabled="select1 == 'a'"
The second key element is the ng-change, that calls a function to set the value for the second select.
$scope.onChange = function() {
if($scope.select1 == 'a') {
$scope.select2 = 'e';
}
}
Surely there are other ways to do it, this is just one.
Related
Using AngularJS, there is a requirement to show a dropdown with a selected value:
- When user selects a different value we should show a warning message and shouldn't proceed with update (save button disable).
- When user reverts to the original value, the message should hide and able to update (save button enable)
<select ng-model="vm.sldetails.AgencyGroupID" onchange=""
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
<label ng-show="">Warning message</label>
Instead of calling an event in controller, can we achieve directly in Onchange event?
<div class="col-md-2">
<select class="form-control" ng-model="vm.sldetails.AgencyGroupID"
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
</div>
HTML:
<label class="col-md-2 control-label text-align-left" id="lblWarningMessage" ng-if="vm.sldetails.AgencyGroupID==='your value'">Warning message</label>
In label tag,your value should be replaced by ur compare value
I guess you could try something like this:
<select ng-model="vm.sldetails.AgencyGroupID" ng-change="vm.selectChanged()"
ng-options="a.AgencyGroupID as a.AgencyGroupName for a in vm.agencygroups">
<option value="">--Select--</option>
</select>
<label ng-show="vm.showWarning">Warning message</label>
And in js:
vm.selectChanged = function(){
if(vm.sldetails.AgencyGroupID !== 'the initial value'){
vm.showWarning = true;
}else{
vm.showWarning = false;
}
}
I have a Dropdown with Differnt Options (Numbers). If a number was selected, an amount of textfields should be shown depending on the number that was selected before.
Example:
User selects number = 2
There should be two time a textfield called "name"
<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
<option value="0">---Please select---</option>
<option value="1">1</option>
<option value="2">2</option>
</select><br>
<div ng-repeat="t in vm.getTimes({{data.singleSelect}}) track by $index">
{{$index}}
<input ng-model="text1" /> <!-- this textfield should be repeated--></div>
Function getTimes in the controller:
vm.getTimes = function (n) {
return new Array(n);
};
I can´t pass vm.getTimes the selected option - why not?
If I write an INT for {{data.singleSelect}} in the function getTimes, it works.
Your getTimes function should be like this.
getTimes = function (n) {
if(n){
return new Array(parseInt(n));
}else{
return 0;
}
}
Why it is not working?
The parameter you passing create array of length initialised using
with the same value.
Because n is string.
You need to parse it to Integer.
Check JavaScript#Array.
Here is the working plunker
You ve a fixed number of options so you can use limitTo
var app = angular.module("app", [])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
<option value="0">---Please select---</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<br>
<div ng-repeat="t in [1,2] | limitTo:data.singleSelect track by $index">
{{$index}}
<input ng-model="text1" />
<!-- this textfield should be repeated-->
</div>
</div>
You are trying to create a new array based on the input (that you assume is a number), but you never ensure that this will indeed be one.
For example:
t in getNumber(data.singleSelect * 1) track by $index would solve it, or
$scope.getNumber = function (num) {
return new Array(parseInt(num));
}
would also make your loop function properly.
What you're trying to do:
> new Array("2")
< ["2"]
What you should do:
> new Array(2)
< [undefined × 2]
//don't worry about undefined for now, but this array has 0 and 1 elements.
Here's an updated fiddle with your sample: https://plnkr.co/edit/rPhFnmmKNvHtSirGCYHG?p=preview
Using Angular 2: Essentially, if attr1 is selected in the first dropdown, I want ops1 to populate the list of the second dropdown, and if attr2 is selected in the first dropdown then ops2 and so on. I tried adding a *ngSwitch to the select and option, but then found out you can only add one * to an element. I also want this to update live. In other words, if the user first selects attr1 then switches to attr2 it should update the second dropdown accordingly
<div class="form-group">
<label for="attribute">Attribute</label>
<select class="form-control" id="attribute" [(ngModel)]="model.attribute" name="attribute" required>
<option *ngFor="let attr of attributes" [value]="attr">{{attr}}</option>
</select>
</div>
<div class="form-group">
<label for="operator">Operator</label>
<select class="form-control" id="operator" [(ngModel)]="model.operator" name="operator" required>
<option *ngFor="let op of operators" [value]="op">{{op}}</option>
</select>
</div>
export class MyModelFormComponent {
attributes = ['attr1', 'attr2'... 'attrN'];
ops1 = ['x', 'y', 'z'];
ops2 = ['A', 'B', 'C'];
...
model = new MyModel();
}
I created a dictionary/object of operators as values and the attributes as the keys. The code for operator looks like this:
<select class="form-control" id="attribute" [(ngModel)]="model.attribute" name="attribute" required>
...
<option *ngFor="let op of operators[model.attribute]" [value]="op">{{op}}</option>
I have a very interesting problem. Have 2 drop-downs, with options
0 = Exclude, 1 = Include, 3 = Only
When user want to select 3 from these 2 list, the other one should be changed to 0-Exclude. But when I try this code, its calling each other and in result the selected (3-Only) dropdown shows 0-Exclude and other 3-Only which is reverse.
Here is the code
Controller.js
$scope.lockedChanged = function() {
if ($scope.data.lockedGldata == 2) {
$scope.data.deactivatedGldata = 0;
}
};
$scope.deactivatedChanged = function () {
if ($scope.data.deactivatedGldata == 2) {
$scope.data.lockedGldata = 0;
}
};
View.html
<div class="form-group">
<label for="lockedGlOption" class="col-sm-3 control-label">Locked G/L:</label>
<div class="col-sm-3">
<select class="form-control" required ng-init="data.deactivatedGldata = 0"
id="lockedGlOption"
ng-model="data.deactivatedGldata"
ng-options="o.id as o.text for o in lockedGlOptions"
ng-change="lockedChanged()">
<option value="" disabled>Select an option...</option>
</select>
</div>
</div>
<div class="form-group">
<label for="DeactivatedGlOption" class="col-sm-3 control-label">Deactivated G/L:</label>
<div class="col-sm-3">
<select class="form-control" required ng-init="data.lockedGldata = 0"
id="DeactivatedGlOption"
ng-model="data.lockedGldata"
ng-options="o.id as o.text for o in DeactivatedGlOptions"
ng-change="deactivatedChanged()">
<option value="" disabled>Select an option...</option>
</select>
</div>
</div>
I think, that when you click on first select. It listen to change of model deactivatedGlData, and in lockedChanged function, which is assigned to ng-change of this dropdown, there is mismatch.
It listen to another dropdown, instead of self one, and that's why it's presenting in reverse.
Could you try to switch order of ng-change?
Instead of in two dropdowns in order:
ng-change="lockedChanged()">
ng-change="deactivatedChanged()">
Write:
ng-change="deactivatedChanged()">
ng-change="lockedChanged()">
Using AngularJS I have a list of selected option and one additional "New" option. What I am trying to do is, when "New" option is chosen it will show a text-box to add a new value.
<select ng-model="group.name" ng-options="bl.Name for bl in Groups" >
<option value="VALUE FROM TEXT BOX">New</option>
</select>
<div class="col-md-4" ng-show="WHEN NEW OPTION IS Chosen ">
<input class="text-box" type="text" name="NewValue" ng-model="group.name" />
</div>
You can try like this
Working Demo
<div ng-app='myApp' ng-controller="ArrayController">
<select ng-model="group.name" ng-options="Group.Name for Group in Groups"></select>
<div class="col-md-4" ng-show="group.name.Value == 'new'">
<input class="text-box" type="text" name="NewValue" ng-model="newValue" />
<button ng-click="add(newValue)">Add</button>
</div>
</div>
Just watch for the selected item change:
$scope.displayDiv = false;
$scope.newval = 'newval';
$scope.$watch('group.name', function(newval, oldval) {
if (newval == $scope.newval) {
$scope.displayDiv = true;
}
}
and for the HTML :
<div class="col-md-4" ng-show="displayDiv">
Here's a working example.
First we set up our options and input.
<select ng-model="curopt"
ng-options="option.name for option in options">
</select>
<input type="text" ng-model="newopt"
ng-show="curopt.name == 'New'"
ng-keypress="newOption($event)">
The ng-show option for our input is tied to the name of the currently selected option. We also add an ng-keypress directive to allow us to handle the enter key being pressed.
Now to the controller...
$scope.newOption = function(event) {
if (event.which == 13) {
$scope.options.push({ name : $scope.newopt, value : $scope.newopt });
$scope.newopt = '';
}
}
Because our select input options is tied to the $scope.options we can simply append our text inputs value to the array and angular will handle updating for us due to data binding.