For example: I have select with 4 items. When I selected first item in select, it will show second select with the same items as in previous, but item which I selected will be disabled. And the same for the next selects, until it remains 1 available item for select.
P.s. the every next one select, should automatically will be selected with first available item.
I attached snipper below, where I visually showed, what the flow I want to achieve.
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
}];
});/* Put your css in here */<!DOCTYPE html>
<html ng-app="ngoptions">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="[email protected]" 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>Please help me with this. Will be greatful!
Since your rule1, rule2, and rule3 arrays are the exact same, I'd first just make this into one: rules. If not, you'd need to make sure three identical arrays are updated in the same way.
ng-change usually works pretty great with these types of inputs. When you select an option, it will fire that change event, and you can make custom functions to handle it.
Side note, you have your ng-model named the same as your item in your loop, but these aren't the same thing.
<select ng-model="item" ng-options="item.type as item.value disable when item.disabled for item in rules" data-ng-change="select(item)">
<option value="" style="display: none" selected="selected">Select When
</option>
</select>
I added that select function that passes in the input's model (the value of the input option you've selected).
Then in your controller, you could have some type of function to handle the change, like:
scope.select = function (value) {
if (!value) { return; }
for (var i=0;i<$scope.rules.length;++i) {
if ($scope.rules[i].value === value) {
$scope.rules[i].disabled = true;
}
}
};