AngularJS根据另一个选择过滤掉选择选项 [英] AngularJS filter out select option based on another selection

问题描述

您好Angular专家

Hello Angular experts,

我已经半天不停地跳动，以列出一个选择列表，在该列表中，可以根据其他选择隐藏或禁用其选项.这是页面的示例代码

I have been banging my head for half of the day to make a list of selections where its options can be hide or disable based on other selections. This is the sample coding of the page

https://jsbin.com/lufugo/1/edit?html，js，输出

如果选择了某个房间，我想在某天做某事，我想从同一天的另一个选择框中删除该房间选择选项.

what I want to do is on a particular day if a room is selected, I want to remove that room select option from the other selection box of the same day.

有人可以帮我吗?

推荐答案

首先，我强烈建议您使用 ngOptions 而不是 ngRepeat . ngOptions 正是针对这种情况而制作的.

First of all, I extremely recommend you to use ngOptions instead of ngRepeat. ngOptions was made exactly for this kind of things.

好吧，要实现您想要的目标，我认为最简单的方法是创建一个新属性(在我的解决方案中，我将其称为 isAvailable - boolean -)，那么您可以根据此属性轻松地操作您的商品.

Well, to achieve what you want I think the simplest way is to create a new property (which, in my solution, I called it as isAvailable - boolean -), then you can easily manipulate your items based on this property.

看看我的解决方案:

(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>

注意:如果您有任何疑问，可以问我.

Note: If you have any doubts you can ask me.

我希望对您有帮助！

这篇关于AngularJS根据另一个选择过滤掉选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！