I'm using Angular2 and I have 2 selects:
<div ng-controller="ExampleController">
<form name="myForm">
<label for="companySelect"> Company: </label>
<select name="companySelect" id="companySelect">
<option *ngFor="let company of companies"
value="{{company.id}}"> {{company.name}}
</option>
</select>
<label for="documentTypeSelect"> Type: </label>
<select name="documentTypeSelect" id="documentTypeSelect">
<option value="type1">type1</option>
<option value="type2">type2</option>
<option value="type3">type3</option>
</select>
</form>
<hr>
</div>
I want to change second select options depending on the first select. I can get types (boolean value) by using
company.companyRelations.pop().type1
company.companyRelations.pop().type2
And now, if for example type1 is false, the option in second select should be disabled and if type2 is true, option should be enabled. Is that possible?
EDIT:
Companies in select have deasdv, invoic and orders properties which are true or false. How can i now pass these properties into component.ts properties? Is it possible by event or what? I want to get for example
company.companyRelations.pop().desadv
For company which is selected and it will change disabled options in the second one.
html
<form name="myForm">
<label for="companySelect"> Company: </label>
<select class="form-control" name="companySelect" id="companySelect"
[(ngModel)]="companySelect" (ngModelChange)="onChange($event)">
<option [ngValue]="undefined" disabled selected>Select...</option>
<option *ngFor="let company of companies" [ngValue]="company.id">
{{company.name}}</option>
</select>
<select name="documentTypeSelect" id="documentTypeSelect">
<option [ngValue]="undefined" disabled selected>Select...</option>
<option [disabled]="!desadv" value="desadv">desadv</option>
<option [disabled]="!invoic" value="invoic">invoic</option>
<option [disabled]="!orders" value="orders">orders</option>
</select>
</form>
component.ts
desadv: boolean = false;
invoic: boolean = false;
orders: boolean = false;
and here it will be something like:
onChange(event) {
if(event.desadv) {
this.desadv = true;
}
}
My solution:
html
<form name="myForm">
<label for="companySelect"> Company: </label>
<select name="companySelect" id="companySelect" [(ngModel)]="companySelect"
(ngModelChange)="onChange($event)">
<option [ngValue]="undefined" disabled selected>Select...</option>
<option *ngFor="let company of companies" [ngValue]="company">
{{company.name}}</option>
</select>
<label for="documentTypeSelect"> Type: </label>
<select name="documentTypeSelect" id="documentTypeSelect">
<option [ngValue]="undefined" disabled selected>Select...</option>
<option [disabled]="!desadv" value="desadv">desadv</option>
<option [disabled]="!invoic" value="invoic">invoic</option>
<option [disabled]="!orders" value="orders">orders</option>
<option [disabled]="!recadv" value="orders">recadv</option>
<option [disabled]="!shipment" value="orders">shipment</option>
</select>
component.ts
onChange(event) {
this.desadv = event.companyRelations[0].desadv;
this.invoic = event.companyRelations[0].invoic;
this.orders = event.companyRelations[0].orders;
this.recadv = event.companyRelations[0].recadv;
this.shipment = event.companyRelations[0].shipment;
}
Try this :
<select class="form-control" name="companySelect" id="companySelect" [(ngModel)]="companySelect" (ngModelChange)="onChange($event)">
<option [ngValue]="undefined" disabled selected>Select...</option>
<option *ngFor="let company of companies" [ngValue]="company.id">{{company.name}}</option>
</select>
<select [disabled]="btnDisable" name="documentTypeSelect" id="documentTypeSelect">
<option value="type1">type1</option>
<option value="type2">type2</option>
<option value="type3">type3</option>
</select>
component.ts
private companySelect: any;
private btnDisable: boolean = true;
onChange(event) {
if(event) {
this.btnDisable = false;
}
}
Yes it is possible.
I have created a demo in which second drop down will be enabled depending upon the value of flag in first drop down object.
// Code goes here
var myApp = angular.module('plunker',[]);
angular.module('plunker').controller('MyCtrl', MyCtrl)
MyCtrl.$inject = ['$scope'];
function MyCtrl($scope) {
$scope.items1 = [{
id: 1,
label: 'aLabel',
'flag':true,
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
'flag':false,
subItem: { name: 'bSubItem' }
}];
$scope.items2 = [{
id: 1,
label: 'MyName',
'flag':true,
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'YourName',
'flag':false,
subItem: { name: 'bSubItem' }
}];
$scope.changeDetect = function(){
$scope.selected1='';
console.log($scope.selected);
if($scope.selected.flag)
{
$scope.flagValue=false;
} else {
$scope.flagValue=true;
}
}
$scope.flagValue=true;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MyCtrl">
<select ng-options="item as item.label for item in items1 track by item.id" ng-model="selected" ng-change="changeDetect()"></select>
<select ng-options="item as item.label for item in items2 track by item.id" ng-model="selected1" ng-disabled="flagValue"></select>
</div>
In AngularJS 2
<select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3">
<option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option>
</select>
<select [ngModel]="selectedDeviceObj1" name="sel2" [disabled]="flag">
<option [ngValue]="i" *ngFor="let i of deviceObjects1">{{i.name}}</option>
</select>
onChangeObj(newObj) {
this.selectedDeviceObj1='';
console.log(newObj);
this.selectedDeviceObj = newObj;
if(newObj.flag){
this.flag = false;
}
else {
this.flag = true;
}
Please find Demo Link Plunkr
Related
I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.
HTML
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
</div>
PHP
if(isset($_POST["pageSelector"]))
{
$result = $_POST['pageSelector'];
if($result == "")
{
echo "<script>alert('Please select the Page')</script>";
}
$result_explode = explode('|', $result);
$width_page = $result_explode[0];
$height_page = $result_explode[1];
// Converting the string variables to integer
$width_plate=(double)$width_plate;
$height_plate=(double)$height_plate;
$width_page=(double)$width_page;
$height_page=(double)$height_page;
// To calculate the number of pages that can be print with one selected plate
$calculated_width = $width_plate/$width_page;
$calculated_height = $height_plate/$height_page;
$print_include = (int)$calculated_height*(int)$calculated_width;
echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";
}
I would like if the user selects the custom option then a input text should appear on the screen.
If user selected a custom option then you can give him an input.
let selectEl = document.getElementById('select-list');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'custom') {
document.getElementById('txt-custom').style.display = 'block';
} else {
document.getElementById('txt-custom').style.display = 'none';
}
});
#txt-custom {
display: none;
}
<select id="select-list">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />
var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');
pageSelector.addEventListener('change', function(){
if(this.value == "custom") {
customInput.classList.remove('hide');
} else {
customInput.classList.add('hide');
}
})
.hide {
width: 0;
height: 0;
opacity: 0;
}
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>
Demo Code :
First you should have input with style="display:none" and with jQuery
jQuery(document).ready(function() {
jQuery("#selectId").change(function() {
if (jQuery(this).val() === 'custom'){
jQuery('input[name=other_input]').show();
} else {
jQuery('input[name=other_input]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<br><br><br>
<input type="text" name="other_input" style="display:none" />
Angular Version
Angular CLI: 13.0.3
Node: 16.15.0
Package Manager: npm 8.5.5
In .html File
**<div class="col-md-6">
<label class="form-label">Attendence Type</label>
<select (change)="type($event)" class="form-select" aria-label="Default select example" >
<option selected value="P">Present</option>
<option value="A">Absent</option>
<option value="PL">Paid Leave</option>
<option value="UL">Unpaid Leave</option>
</select>
</div>**
I want to Show this input after select paid leave
**<div *ngIf="plFlag" class="col-md-6">
<label class="form-label">Leave Type</label>
<select class="form-select" aria-label="Default select example">
<option selected disabled>Leave Type</option>
<option value="CL">Causel Leave</option>
<option value="SL">Seek Leave</option>
</select>
</div>**
and in .ts File
**type(event: any) {
console.log(event.target.value);
if (event.target.value == "PL") {
this.plFlag = true;
}
else {
this.plFlag = false;
}
}**
I have a button which adds more select drop downs when clicked. So I would like to remove the already selected options in these select boxes for preventing duplication.
The following code is used for the select drop down:
<select class="select form-control"
formControlName="environment_id" (change)="onEnvChange($event.target.value)">
<option selected="selected" disabled value="">Select Environment
</option>
<ng-container *ngFor="let environment of environments">
<option *ngIf="!selectedEnvironments.includes(environment.environment_id)"
[value]="environment.environment_id">
{{environment.environment_id}}</option>
</ng-container>
</select>
and in the component I ave the following function for change
public onEnvChange(selectedEnvironment)
{
this.selectedEnvironments.push(selectedEnvironment);
}
Now when I select an option, that option itself gets removed from the dropdown. For example if I have options like option1,option2,option3 etc, when I select option1, option1 is getting removed from the dropdown. How to fix this and remove the option only for the next select dropdown ?
You can try create two objects of environments and listen selection with valueChanges from formControl. After you get the selected environmentid and filter the other object without this id
Example
ngOnInit(){
this.createForm();
this.getEnvironments();
this.environmentChanges()
}
createForm(){
this.form = this.fb.group({
'environment_id_1': [''],
'environment_id_2' : ['']
})}
getEnvironments(){
const environments = [
{ 'environment_id': 1, 'environment': 'A' },
{ 'environment_id': 2, 'environment': 'B' },
{ 'environment_id': 3, 'environment': 'C' },
{ 'environment_id': 4, 'environment': 'D' }];
this.environments1 = environments;
this.environments2 = environments;}
environmentChanges(){
this.form.controls['environment_id_1'].valueChanges
.subscribe((environment_id)=>{
this.environments2 = this.environments1.filter((env)=> env.environment_id != environment_id)
})}
<form [formGroup]="form">
<div class="row">
<select class="select form-control" formControlName="environment_id_1">
<option value="">Select Environment 1 </option>
<option *ngFor="let environment of environments1" [value]="environment.environment_id"> {{environment.environment}} </option>
</select>
</div>
<div class="row" style="padding-top: 10px;">
<select class="select form-control" formControlName="environment_id_2">
<option value="">Select Environment 2 </option>
<option *ngFor="let environment of environments2" [value]="environment.environment_id"> {{environment.environment}} </option>
</select>
</div>
enter image description here
when user chooses an option in selectbox a new box is triggered.
But supposed user changes his opinion and choose a new option, the former selectbox does not vanish.
How can I make the “wrong” selectbox – first choice – vanish.
I have a working example at codepen to illustrate the issue.
When user makes a decision with “Choose Option” he calls the hotelchecker function, so that a second selectbox appears “Option based on previous choice”. When he than reconsider his choice and choose again from “Choose option” - how can I prevent, that I have multiple second selectboxes?
Here is my HTML:
<div id="selectbox">
<select class="selectstyled" id="change">
<option value="0">Choose Option</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
</div>
Here my JS:
[let changeUse = document.getElementById("change");
changeUse.addEventListener("change", hotelchecker);
function hotelchecker() {
if (changeUse.value == 1) {
document.getElementById("selectbox").insertAdjacentHTML("afterend", `
<div id = "selectbox">
<select class = "selectstyled"
id = "changeHotel">
<option value="0">Option based on previuos choice</option>
<option value="1">Further choice 1</option>
<option value="2">Further choice 2</option>
<option value="3">Further choice 3</option>
</select>
</div>
`)
}
if (changeUse.value == 2) {
document.getElementById("selectbox").insertAdjacentHTML("afterend", `
<div id = "selectbox">
<select class = "selectstyled"
id = "changeHotel">
<option value="0">Option based on previuos choice</option>
<option value="1">Further choice 1</option>
<option value="2">Further choice 2</option>
<option value="3">Further choice 3</option>
</select>
</div>
`)
}
};][1]
I thought about running a querySelectorAll "changeHotel" and if it is >0 to remove existing element but I always get "undefined".
You need to add selectbox with unique id.
then on change event clear your selectedbox element.
try below solution.
let changeUse = document.getElementById("change");
changeUse.addEventListener("change", hotelchecker);
function hotelchecker() {
var element = document.getElementById('selectbox1');
if (typeof(element) != 'undefined' && element != null)
{
element.parentNode.removeChild(element);
}
var element2 = document.getElementById('selectbox2');
if (typeof(element2) != 'undefined' && element2 != null)
{
element2.parentNode.removeChild(element2);
}
if (changeUse.value == 1) {
document.getElementById("selectbox").insertAdjacentHTML("afterend", `
<div id = "selectbox1">
<select class = "selectstyled"
id = "changeHotel">
<option value="0">Option based on previuos choice</option>
<option value="1">Further choice 1</option>
<option value="2">Further choice 2</option>
<option value="3">Further choice 3</option>
</select>
</div>
`)
}
if (changeUse.value == 2) {
document.getElementById("selectbox").insertAdjacentHTML("afterend", `
<div id = "selectbox2">
<select class = "selectstyled"
id = "changeHotel">
<option value="0">¿En qué Hotel?</option>
<option value="4">Hotel 1 auf Granni</option>
<option value="5">Hotel 2 auf Granni</option>
<option value="6">Hotel 3 auf Granni</option>
</select>
</div>
`)
}
};
<div id="selectbox">
<select class="selectstyled" id="change">
<option value="0">Choose Option</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
</div>
Too much hardcoding, I would suggest to do it in beautiful way, create element for second option
<div id="selectbox">
<select class="selectstyled" id="change">
<option value="0">Choose Option</option>
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
<select class="selectstyled" id = "secondSelection"></select>
</div>
and script is
let changeUse = document.getElementById("change");
changeUse.addEventListener("change", hotelchecker);
const optionsSets = {
0: [],
1: [
{ value: '0', text: 'Option based on previuos choice'},
{ value: '1', text: 'Further choice 1'},
{ value: '2', text: 'Further choice 2'},
],
2: [
{ value: '0', text: '¿En qué Hotel?'},
{ value: '4', text: 'Hotel 1 auf Granni'},
{ value: '5', text: 'Hotel 2 auf Granni'},
],
}
function hotelchecker() {
const secondSelection = document.getElementById("secondSelection")
secondSelection.innerHTML =
optionsSets[changeUse.value].map(({ value, text }) =>
`<option value="${value}">${text}</option>`
).join('')
secondSelection.style.display = +changeUse.value ? 'block' : 'none'
}
hotelchecker()
I am using AngularJS. There are two select, the first is the "team select," the second is the "member select." If the "team select" have the members, the "member select" show " select the member ." If the "team select" don't have the members, the 'member select" show "no member."
My problem is how to change the default option of the "member select".
This is my code:
<script src="angular.js"></script>
<div class="bigDiv">
<select class="common_select" name="xxx" ng-options="item as item.teamname for item in team_array" ng-model="select_team" id="" ng-change="selectMemberFun(select_team)">
<option value="" disabled selected hidden>select a team</option>
</select>
<select class="common_select" name="xxxxx" id="" ng-options="item as item.name for item in select_team.members" ng-model="select_member">
<option ng-show="!have_member" value="" disabled selected hidden>no member</option>
<option ng-show="have_member" value="" disabled selected hidden>select a member</option>\
</select>
</div>
<script src="angular.js"></script>
<script>
angular.module('app',[]).controller('xxx',['$scope', function ($scope) {
$scope.have_member = false;
$scope.team_array = [
{teamname: "team1", members:[ {name:'team1member1'}, {name:'team1member2'}]},
{teamname: "team2", members:[ {name:'team2member1'}, {name:'team2member2'}]},
{teamname: "team3", members:[]},
];
$scope.selectMemberFun = function (team) {
if(team.members.length == 0){
$scope.have_member = false;
} else {
$scope.have_member = true;
}
}
}])
</script>
Why does the 'ng-show' directive not work ? The "member select" always shows "no member".
I've tried a few ways, looks like this one works.
angular.module('app', []).controller('TestController', ['$scope',
function($scope) {
$scope.have_member = false;
$scope.team_array = [{
teamname: "team1",
members: [{ name: 'team1member1' }, { name: 'team1member2' }]
}, {
teamname: "team2",
members: [{ name: 'team2member1' }, { name: 'team2member2' }]
}, {
teamname: "team3",
members: []
}, ];
$scope.selectMemberFun = function(team) {
if (team.members.length == 0) {
$scope.have_member = false;
} else {
$scope.have_member = true;
}
}
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div class="bigDiv" ng-app="app" ng-controller="TestController">
<select class="common_select" name="xxx" ng-options="item as item.teamname for item in team_array" ng-model="select_team" id="" ng-change="selectMemberFun(select_team)">
<option value="" disabled selected hidden>select a team</option>
</select>
<select class="common_select" name="xxxxx" id="" ng-options="item as item.name for item in select_team.members" ng-model="select_member">
<option value="" disabled selected hidden>{{have_member ? 'select a member' : 'no member'}}</option>
</select>
</div>
According to the documentation -> https://docs.angularjs.org/api/ng/directive/select
<select name="singleSelect" id="singleSelect" ng-model="data.singleSelect">
<option value="">---Please select---</option> <!-- not selected / blank option -->
<option value="{{data.option1}}">Option 1</option> <!-- interpolation -->
<option value="option-2">Option 2</option>
</select>
It doesn't work because ngOptions is like ngReapeat in that it will ONLY iterate when there are values in the select_team.members array. In Team3 the member array is empty, so all the inner <option></option> are skipped.
I have taken a select list with multiple option using ng-options. I am using it as below:
<select ng-options="c as c.Text for c in ReceiverList track by c.Value" ng-model="ReceiverUserID" class="form-control" id="ddlReceiverUserID" ng-change="GetWorkers(ReceiverUserID, SenderUserID,'receiver')">
<option value="">--Select Supervisor--</option>
</select> <!-- Parent Drop Down-->
<select multiple ng-options="c as c.Text group by c.Group
for c in receiveList track by c.Value" ng-model="Workers"
class="form-control" id="ddlWorkers" size="10">
</select> <!-- Child Drop Down -->
This select dropdown get filled when I select some item from another dropdown.(It's a kind of cascaded dropdown). Filling it like below:
$scope.GetWorkers = function (objA, objB, ddlType) {
$http.post("user/Workers/", { userID: objA.Value })
.success(function (data, status, headers, config) {
if (ddlType == 'sender') {
$scope.sendList = data;
} else {
$scope.receiveList = data;
$('#ddlWorkers optgroup[label="Current Users"] option').prop('disabled', true); // Not working
}
})
.error(function (data, status, headers, config) {
showToast(ToastType.error, "Error occured while fetching workers.", "Failure");
});
}
I want to disable child dropdown's specific group items. So I tried below code but it is not working:
$('#ddlWorkers optgroup[label="Current Users"] option').prop('disabled', true);
I don't know how do I disable specific group items of select whenever its data changes or new data loaded.
Here is HTML output in which I want to disable all optgroup[label="Current Users"] members:
<select multiple="" ng-options="c as c.Text group by c.Group for c in receiveList track by c.Value" ng-model="Workers" class="form-control ng-pristine ng-valid" id="ddlWorkers" size="10">
<optgroup label="Current Users">
<option value="4118">Kevins Numen</option>
<option value="4119">ggdfg fdgdfg</option>
</optgroup>
<optgroup label="New Users">
<option value="1093">Case Worker</option>
</optgroup>
</select>
I don't know much about angularjs or ng-options, but it seems that everybody else used some timeout to let the process populate the received data to the input, and you can try something this like others:
...
} else {
$scope.receiveList = data;
setTimeout(function(){
$('#ddlWorkers optgroup[label="Current Users"] option')
.prop('disabled', true); // Not working
}, 100);
}
...
maybe not similar but good to have a look here:
is there a post render callback for Angular JS directive?
You need to customize your code and also JSON Object
<div ng-controller="AjaxCtrl">
<h1>AJAX - Oriented</h1>
<div>
Country:
<select id="country" ng-model="country" ng-options="country for country in countries">
<option value=''>Select</option>
</select>
</div>
<div>
City: <select id="city" ng-disabled="!cities" ng-model="city"><option value='' ng-repeat="item in cities" ng-disabled="item.disabled">{{item.name}}</option></select>
</div>
<div>
Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs"><option value='' ng-disabled="item.disabled" ></option></select>
</div>
</div>
Your Angular
function AjaxCtrl($scope) {
$scope.countries = ['usa', 'canada', 'mexico', 'france'];
$scope.$watch('country', function(newVal) {
if (newVal)
$scope.cities = [
{ id: 1, name: '11111'},
{ id: 2, name: '22222', disabled: true },
{ id: 3, name: '33333', disabled: true }
]
});
$scope.$watch('city', function(newVal) {
if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
});
}
function AjaxCtrl($scope) {
$scope.countries = ['usa', 'canada', 'mexico', 'france'];
$scope.$watch('country', function(newVal) {
if (newVal)
$scope.cities = [
{ id: 1, name: '11111'},
{ id: 2, name: '22222', disabled: true },
{ id: 3, name: '33333', disabled: true }
]
});
$scope.$watch('city', function(newVal) {
if (newVal) $scope.suburbs = ['SOMA', 'Richmond', 'Sunset'];
});
}
<link href="http://fiddle.jshell.net/css/normalize.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<div ng-controller="AjaxCtrl" class="ng-scope">
<h1>AJAX - Oriented</h1>
<div>
Country:
<select id="country" ng-model="country" ng-options="country for country in countries" class="ng-valid ng-dirty"><option value="" class="">Select</option><option value="0">usa</option><option value="1">canada</option><option value="2">mexico</option><option value="3">france</option></select>
</div>
<div>
City: <select id="city" ng-disabled="!cities" ng-model="city" class="ng-valid ng-dirty"><!-- ngRepeat: item in cities --><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding">11111</option><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding" disabled="disabled">22222</option><option value="" ng-repeat="item in cities" ng-disabled="item.disabled" class="ng-scope ng-binding" disabled="disabled">33333</option></select>
</div>
<div>
Suburb: <select id="suburb" ng-disabled="!suburbs" ng-model="suburb" ng-options="suburb for suburb in suburbs" class="ng-pristine ng-valid" disabled="disabled"><option value="" ng-disabled="item.disabled" class=""></option></select>
</div>
</div>
Reference