I'm trying to use ng-model to show a series of dropdowns. If I set the top select to empty option then the rest of the dropdowns should be set to the empty option.
<select ng-model="ddl">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<div ng-show="ddl">
<div ng-show="ddl != null">
<select ng-model="ddl1">
<option></option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<div ng-show="ddl1">
<select>
<option></option>
<option>7</option>
<option>8</option>
<option>9</option>
</select>
</div>
</div>
JSFiddle-Link
You could use the ng-change directive to run a funciton in your controller that set's the dropdowns to empty if the top one is empty.
https://docs.angularjs.org/api/ng/directive/ngChange#!
something like
$scope.reset = function() {
if($scope.ddl === "") {
$scope.ddl1 = ""; $scope.ddl2 = "";
}
}
Related
Have code:
<tr data-ng-repeat="item in data.items">
<td>{{item.Id}}</td>
<td>
<div>
{{ data.items[$index].selectedBusinessType.id }}
{{ data.items[$index].businessTypes[$index].id }}
<select ng-options="businessType.name for businessType
in item.businessTypes track by businessType.id"
data-ng-model="item.businessTypes.id == item.selectedBusinessType.id">
</select>
</div>
</td>
</tr>
In div models result is ok, but dropdown still didn't work
DropDown without value screen
Scope data from back
Can i get some solution what i doing wrong?
You will probably need filter. Try something like: (plunker: https://next.plnkr.co/edit/DiInzWMC2k8WZzuH)
<select class="form-control" ng-model="$scope.data.items[0].selectedBusinessType.id" ng-options="businessType.name for businessType in item.businessTypes | filter:doFilter(item.selectedBusinessType)">
</select>
And in controller:
$scope.doFilter = function(id) {
console.log("selectedId:" + Object.values(id))
return function(value, index, array) {
console.log(value.id)
if(value.id == Object.values(id))
return true;
}
};
Relate to the answer in https://stackoverflow.com/a/39635805/4952634
On angularJs version 1.5 work option like this:
Plunk - Use angularJs 1.5x
<select class="form-control" ng-model="data.items[$index].selectedBusinessType.id"
ng-disabled="item.CanChangeBusinessType"
ng-change="changeBusinessType(item, selectedBusinessType.id)">
<option ng-repeat="businessType in item.businessTypes" ng-value="businessType.id">
{{businessType.id}}
</option>
</select>
But this don't work on version 1.4+.
Plunk - Use angularJs 1.4x
<div>
<select class="form-control" ng-model="data.items[$index].selectedBusinessType.id"
ng-disabled="item.CanChangeBusinessType"
ng-change="changeBusinessType(item, selectedBusinessType.id)">
<option ng-repeat="businessType in item.businessTypes" ng-value="businessType.id">
{{businessType.id}}
</option>
</select>
</div>
Second worked option - use ng-option:
Ng-Option using
<select class="form-control" ng-model="item.selectedBusinessType"
ng-options="option.id as option.name for option in data.businessTypes"
ng-disabled="item.CanChangeBusinessType"
ng-change="changeBusinessType(item, item.selectedBusinessType, '{{item.selectedBusinessType}}')">
<option value="">-- Не указан --</option>
</select>
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;
}
}
Instead of using the following:
<select class="form-control" disabled>
<option ng-repeat="category in Categories" value="category.id" ng-selected="APIdata.category_id === category.id">{{ category.name }}
</option>
</select>
is it possible to use an input text only since the above selected list is disabled and there is no possibility of changing its value? Categories and APIdata are properties(Categories is an array and APIdata is an object) of $scope. How should we do that?
Add in your controller in the right place:
$scope.category = $scope.Categories.filter(c => c.id === $scope.APIdata.category_id)[0];
Change your view:
<input type="text" ng-model="category" disabled/>
I have a problem to read the information selected that is propagate in a select.
<div ng-show="deviceDetail != null" ng-model="example" >
<select >
<option value="NONE">Select</option>
<option ng-repeat="option in deviceDetail" ng-change="selectOption()">{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
</div>
this is the HTML code and in the {{example}} I want to see the information that the user selected.
this is the part of the js releted:
$scope.selectOption = function() {
$scope.example = option.productName;
};
How I can fix it?
Thanks a million!
Set your example scope variable directly in <select> instead calling ng-change event and assigning into that function.
You can directly set option.name to example model with the use of ng-options too.
Here You have applied ng-model directive to div tag.
<div> is not input element so apply ng-model to <select> element here.
I would suggest to use ng-options directive for filling the selection list in <select>. ng-repeat is also fine.
Here you are binging ng-change event so in the function if requires then you can pass the object on which event is triggering so you can use that object or perform any operation on that.
Below is the modified template.
<div ng-show="deviceDetail != null">
<select >
<option value="NONE">Select</option>
<option ng-model="example" ng-options="option in deviceDetail" ng-change="selectOption(option)">{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
</div>
You should to pass current option:
<select >
<option value="NONE">Select</option>
<option ng-repeat="option in deviceDetail" ng-change="selectOption(option )">{{option}}</option>
</select>
$scope.selectOption = function(option) {
$scope.example = option; // is there property .productName?;
};
Try this:
<div ng-show="deviceDetail != null">
<select >
<option value="NONE">Select</option>
<option ng-model="option" ng-options="option in deviceDetail" ng-change="selectOption(option)">
{{option}}</option>
</select>
<br/>
The value of the selection is: {{example}}
Js:
$scope.selectOption = function(option) {
$scope.example = option;
};
You should use ng-options
The value of the selection is: {{example}}
I have a select element with ng-options to populate options and <option value="">Select</option> as a static default option. I want to show another item in options list - Other, if selected, renders a textbox for user to enter other value. I tried adding another static option with value="-1" but it didn't work.
I would try following:
<div ng-init="arr = [{name:'A', val:1},{name:'B', val:2},{name:'C', val:2}]">
<select ng-model="v">
<option ng-repeat="o in arr" value="o.val">{{ o.name }}</option>
<option>Other</option>
</select>
<input type="number" ng-model="otherval" ng-show="v == 'other'"/>
</div>
or,
<div ng-init="arr = [{name:'A', val:1},{name:'B', val:2},{name:'C', val:2}]">
<select ng-model="v" ng-options="o.val as o.name for o in arr.concat([{name:'Other',val:'other'}])">
</select>
<input type="number" ng-model="otherval" ng-show="v == 'other'"/>
</div>