Question

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

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

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

控制器：

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 }
  ];
});

查看：

<select ng-model="selectBedrooms">
    <option value="all">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="selectBathrooms">
    <option value="all">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" ng-show="selectBedrooms=='{{house.bedrooms}}' || selectBedrooms=='all' || selectBathrooms=='{{house.bedrooms}}' || selectBathrooms=='all'">
            <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>

非常感谢正确方向的任何一点，提前谢谢。

Answer 1

您不需要ng-show属性来过滤ng-repeat。可以直接过滤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>

这里有一个例子来使用卧室和浴室的过滤器。更多信息可以在这里找到：https://docs.angularjs.org/api/ng/filter/filter

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

1 个答案: