こんにちは角度の専門家、他の選択に基づいて選択オプションを除外する。これは私が何をしたいページのサンプルコーディングAngularJSは、私はそのオプションが他の選択に基づいて非表示にすることや無効にすることができます選択肢のリストを作成するために、1日の半分のための私の頭を叩いてきた</p> <p>
https://jsbin.com/lufugo/1/edit?html,js,output
である私は、同じ日の他の選択ボックスからその部屋の選択オプションを削除したい部屋を選択した場合は、特定の日にあります。
いくつかお手伝いできますか？
まず、ngRepeatの代わりにngOptionsを使用することを強くお勧めします。 ngOptionsはこの種のもののために作られました。その後、簡単にあなたの項目に基づいて操作することができ、
さて、あなたは私が最も簡単な方法は、（ - - ブール、私の溶液中で、私はisAvailableとしてそれを呼ばれる）新しいプロパティを作成することだと思いたいものを達成するためにこのプロパティ。
私の解決策について見てみましょう：
(function() {
"use strict";
angular.module('app', [])
.controller('mainCtrl', function($scope) {
$scope.roomAllocation = {
"dates":[
{
"date":"2016-07-16",
"dayRooms":[
{
"room":1,
"occupancy":2,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
},
{
"room":2,
"occupancy":3,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
}
]
},
{
"date":"2016-07-17",
"dayRooms":[
{
"room":1,
"occupancy":2,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
},
{
"room":2,
"occupancy":1,
"roomType":"Standard",
"availableRooms":[
{
"id":15,
"roomNumber":200
},
{
"id":16,
"roomNumber":201
},
{
"id":17,
"roomNumber":202
},
{
"id":18,
"roomNumber":203
}
]
}
]
}
]
};
// Function to set all rooms as available on initialization
function set_availables() {
$scope.roomAllocation.dates.forEach(function(date) {
date.dayRooms.forEach(function(dayRoom) {
dayRoom.availableRooms = dayRoom.availableRooms.map(function(avalRoom) {
avalRoom.isAvailable = true;
return avalRoom;
});
});
});
}
set_availables();
$scope.newRoomObject = {};
// Fires on change of the select
$scope.disable_room = function(dateIndex, roomIndex) {
var currDate = $scope.roomAllocation.dates[dateIndex];
// The current number room selected
var selectedRoomNumber = $scope.newRoomObject[currDate.date][roomIndex + 1].roomNumber;
// Setting property isAvaliable to true/false
currDate.dayRooms.forEach(function(value, index) {
if (index != roomIndex) {
value.availableRooms = value.availableRooms.map(function(avalRoom) {
avalRoom.isAvailable = avalRoom.roomNumber != selectedRoomNumber;
return avalRoom;
});
}
});
}
});
})();div span {
margin-right: 15px;
}<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<div ng-repeat="date in roomAllocation.dates track by $index">
<div ng-repeat="rooms in date.dayRooms track by $index">
<span ng-bind="date.date"></span> <span ng-bind="'Room ' + '#' + rooms.room"></span> <span ng-bind="rooms.roomType"></span> <span ng-bind="'Occ: ' + rooms.occupancy"></span>
<span>
<select ng-options="room as room.roomNumber for room in rooms.availableRooms | filter: { isAvailable: true }" ng-model="newRoomObject[date.date][rooms.room]" ng-change="disable_room($parent.$index, $index)">
<option value="" disabled>Select Room</option>
</select>
</span>
</div>
<hr>
</div>
</body>
</html>注：をあなたが私に尋ねることができます任意の疑問を持っている場合。
私はそれが助けて欲しいです！
WOW。本当にありがとう。あなたは私の一日を救った。 @ developer033 – rajith1986
お気軽に – developer033
私はあなたのコードに似たようなものを使うと、最初のドロップダウンから選択したものも削除します。あなたは最初のドロップダウンで選択を保持するのに、他のものからそれを削除するためにどのような魔法を使いましたか？ –
まず、カスタムフィルタを実行する必要がありますが、なぜこの 'ngModel'をとても複雑に使うのですか？ – developer033
@ developer033フィルタを書く手助けはできますか？サンプルコードが役に立ちます。ありがとう – rajith1986