var app = angular.module('ngoptions', []);
app.controller('MainCtrl', function($scope) {
$scope.rules1 = [{
type: 'first item',
value: 'first item',
disabled: false
}, {
type: 'second item',
value: 'second item',
disabled: false
}, {
type: 'third item',
value: 'third item',
disabled: false
}, {
type: 'fourth item',
value: 'fourth item',
disabled: false
}];
$scope.rules2 = [{
type: 'first item',
value: 'first item',
disabled: true
}, {
type: 'second item',
value: 'second item',
disabled: false
}, {
type: 'third item',
value: 'third item',
disabled: false
}, {
type: 'fourth item',
value: 'fourth item',
disabled: false
}];
$scope.rules3 = [{
type: 'first item',
value: 'first item',
disabled: true
}, {
type: 'second item',
value: 'second item',
disabled: true
}, {
type: 'third item',
value: 'third item',
disabled: false
}, {
type: 'fourth item',
value: 'fourth item',
disabled: false
}];
});
<!DOCTYPE html>
<html ng-app="ngoptions">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="item" ng-options="item.type as item.value disable when item.disabled for item in rules1">
<option value="" style="display: none" selected="selected">Select When
</option>
</select>
<br>
after selecting first select, first item:
<br>
<select ng-model="item1" ng-options="item.type as item.value disable when item.disabled for item in rules2">
<option value="" style="display: none" selected="selected">Select When
</option>
</select>
<br>
after selecting second select, second item:
<br>
<select ng-model="item2" ng-options="item.type as item.value disable when item.disabled for item in rules3">
<option value="" style="display: none" selected="selected">Select When
</option>
</select>
</body>
</html>