AngularJS 应用中的乘法过滤器

Question

我在 angularJS 应用程序中过滤数据时遇到问题。有代码：

<p>
<span>Lokalizacja: </span>
<select ng-model="location" class="form-control">
    <option value="" disabled selected>Wybierz lokalizacje...</option>
    <option value="Łepkowskiego D">Łepkowskiego D</option>
</select>
</p>

<p>
    <span>Liczba pokoi: {{rooms}}</span>
    <input type="range" ng-model="rooms" min="1" max="5">
</p>

<p>
    <span>Piętro: {{floor}}</span>
    <select ng-model="floor" class="form-control">
        <option value="" disabled selected>Wybierz piętro</option>
        <option value="Parter">Parter</option>
        <option value="I">Piętro I</option>
        <option value="II">Piętro II</option>
        <option value="III">Piętro III</option>
        <option value="IV">Piętro IV</option>
        <option value="V">Piętro V</option>
        <option value="VI">Piętro VI</option>
    </select>
</p>

这是我的 ng-repeat：

<tr ng-repeat="flat in flats | filter: location | filter: floor | filter: rooms">
    <td>{{flat.location}}</td>
    <td>{{flat.floor}}</td>
    <td>{{flat.surface}}</td>
    <td>{{flat.rooms}}</td>
    <td>{{flat.price}}</td>
</tr>

这里是控制器中的数据示例：

{
    "location":"Łepkowskiego D",
    "floor":"I",
    "surface":55.70,
    "rooms":3,
    "price":6200
},
{
    "location":"Łepkowskiego D",
    "floor":"I",
    "surface":52.18,
    "rooms":3,
    "price":6300
},

我的问题是如何做一个过滤器，例如我选择楼层：I，房间：2 并且在应用程序中将显示一楼和 2 个房间的所有记录，而不像这张照片：

my problem

最好的问候和抱歉我的英语。

Answer 1

只需在您的 ng-repeat 中使用这样的过滤器：

<tr ng-repeat="flat in flats | filter:{location:location, floor:floor, rooms:rooms}">

Answer 2

发生这种情况是因为您使用的是链接过滤器，而不是与它应该匹配的对象掩码进行比较。因此，您必须通过设置 filter:{ location: location, floor: floor, rooms: rooms } 之类的过滤器来为所有对象添加这组属性来实现它的掩码。此外，在第一时间你必须初始化你的 $scope.room 因为在第一次加载时它没有值，直到你改变它的值。

以下代码片段实现了过滤器依赖项并初始化了您的值。

angular.module('app', [])
  .controller('myController', function ($scope) {
      $scope.rooms = 3;
      $scope.flats = [{
         "location":"Łepkowskiego D",
         "floor":"I",
         "surface":55.70,
         "rooms":3,
         "price":6200
        },
        {
         "location":"Łepkowskiego A",
         "floor":"II",
         "surface":52.18,
         "rooms":4,
         "price":6300
        }];
    });
angular.element(document).ready(function () {
  angular.bootstrap(document, ['app']);
});

table{
  border-collapse: collapse;
}
td,th{  
  padding:4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myController">
      <p>
        <span>Lokalizacja: </span>
        <select ng-model="location" class="form-control">
         <option value="" disabled selected>Wybierz lokalizacje...</option>
         <option value="Łepkowskiego D">Łepkowskiego D</option>
        </select>
        </p>
        
        <p>
         <span>Liczba pokoi: {{rooms}}</span>
         <input type="range" ng-model="rooms" min="1" max="5">
        </p>
        
        <p>
         <span>Piętro: {{floor}}</span>
         <select ng-model="floor" class="form-control">
          <option value="" disabled selected>Wybierz piętro</option>
          <option value="Parter">Parter</option>
          <option value="I">Piętro I</option>
          <option value="II">Piętro II</option>
          <option value="III">Piętro III</option>
          <option value="IV">Piętro IV</option>
          <option value="V">Piętro V</option>
          <option value="VI">Piętro VI</option>
         </select>
        </p>
 
        <table border="1">
          <tr>
         <th>Location</th>
         <th>Floor</th>
         <th>Surface</th>
         <th>Liczba pokoi</th>
         <th>Price</th>
          </tr>
          <tr ng-repeat="flat in flats | filter:{ location:location, floor:floor, rooms:rooms }">
         <td>{{flat.location}}</td>
         <td>{{flat.floor}}</td>
         <td>{{flat.surface}}</td>
         <td>{{flat.rooms}}</td>
         <td>{{flat.price}}</td>
          </tr>
        </table>
    </div>

AngularJS 应用中的乘法过滤器

Multiply filter in AngularJS app

angularjs

angular-filters