-1
例如:我選擇了4項。當我在選擇中選擇第一個項目時,它將顯示與之前相同的項目的第二個選擇,但我選擇的項目將被禁用。對於下一個選擇也是如此,直到它仍然是1個可用的選項。如何根據以前在Angular中選擇的項目禁用下一個ng選擇項目?
P.s.每隔下一個選擇,應自動選擇第一個可用項目。
我附加了snipper在下面,我直觀地顯示,我想要達到的流量。
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>
請幫助我。將是偉大的!