angularJS中数据的多选菜单过滤器

我试图通过以下方式实现房屋过滤器：

• 卧室
• 浴室
• 价格（从）
• 价格（至）

我已经设法让一个选择菜单工作并按卧室过滤，但当我添加更多的过滤器时，我似乎无法让它一起工作，也无法理解这样做的最佳实践。下面是我目前的代码

控制器：

angular.controller('HouseStylesCtrl', function ($scope) {
  $scope.selectBedrooms = 'all';
  $scope.selectBathrooms = 'all';
  $scope.houses = [
      { id: 1, name: 'The Astaire', bedrooms: '1', bathrooms: '1', price: '196,995', image: 'the-astaire.jpg', showHome: false, sold: false },
      { id: 2, name: 'The Burton', bedrooms: '2', bathrooms: '2', price: '201,995', image: 'the-burton.jpg', showHome: true, sold: false },
      { id: 3, name: 'The McQueen', bedrooms: '3', bathrooms: '1', price: '196,995', image: 'the-mcqueen.jpg', showHome: false, sold: false },
      { id: 4, name: 'The Hepburn', bedrooms: '4', bathrooms: '2', price: '197,105', image: 'the-hepburn.jpg', showHome: false, sold: false },
      { id: 5, name: 'The Astaire', bedrooms: '1', bathrooms: '1', price: '196,995', image: 'the-astaire.jpg', showHome: false, sold: false },
      { id: 6, name: 'The Burton', bedrooms: '2', bathrooms: '2', price: '201,995', image: 'the-burton.jpg', showHome: false, sold: false },
      { id: 7, name: 'The McQueen', bedrooms: '3', bathrooms: '1', price: '196,995', image: 'the-mcqueen.jpg', showHome: false, sold: false },
      { id: 8, name: 'The Hepburn', bedrooms: '4', bathrooms: '2', price: '197,105', image: 'the-hepburn.jpg', showHome: false, sold: true }
  ];
});

视图：

卧室
一个
两个
三
四
浴室
一个
两个

---

如果方向正确，我们将不胜感激，请提前感谢。

您不需要使用“ng显示”属性来过滤ng重复。可以直接在ng repeat中进行过滤

请尝试使用以下代码：

<select ng-model="search.bedrooms">
    <option value="">Bedrooms</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="3">Four</option>
</select>
<select ng-model="search.bathrooms">
    <option value="">Bathrooms</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<div class="house-style-list">
    <ul>
        <li ng-repeat="house in houses | filter:search:strict">
            <a href="#/house-styles/the-astaire">        
                <img src="/images/house-styles/{{house.image}}">
                <div class="content"> 
                    <h5>{{house.name}}</h5>
                    <span class="bedrooms">{{house.bedrooms}}</span>
                    <span class="bathrooms">{{house.bathrooms}}</span>
                    <span class="price">&pound;{{house.price}}</span>
                </div>
            </a>
        </li>
    </ul>
</div>

卧室
一个
两个
三
四
浴室
一个
两个

这里有一个将过滤器用于卧室和浴室的示例。

---

更多信息可在此处找到：

非常感谢LaurenH，如果价格过滤器是一个从X开始到XHm结束的数字，您将如何处理它。。你可以使用范围滑块。但我以前从未使用过范围过滤器。

<select ng-model="search.bedrooms">
    <option value="">Bedrooms</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="3">Four</option>
</select>
<select ng-model="search.bathrooms">
    <option value="">Bathrooms</option>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
<div class="house-style-list">
    <ul>
        <li ng-repeat="house in houses | filter:search:strict">
            <a href="#/house-styles/the-astaire">        
                <img src="/images/house-styles/{{house.image}}">
                <div class="content"> 
                    <h5>{{house.name}}</h5>
                    <span class="bedrooms">{{house.bedrooms}}</span>
                    <span class="bathrooms">{{house.bathrooms}}</span>
                    <span class="price">&pound;{{house.price}}</span>
                </div>
            </a>
        </li>
    </ul>
</div>