-1
例：4項目で選択しました。選択項目の最初の項目を選択すると、前と同じ項目の2番目の項目が表示されますが、選択した項目は無効になります。そして、それは次の選択のために同じであり、選択のための1つの利用可能な項目のままである。以前に選択したアイテムに基づいて、次のng-selectアイテムを無効にする方法は？
p.s.次のすべての選択は、最初に利用可能な項目で自動的に選択されます。
私は視覚的に示された下に、私が達成したい流れを添付しました。
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>これで私を助けてください。素晴らしいでしょう！