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-繰り返しである：

<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 
}, 

私の質問はどこフィルタを行う方法であります私は床を選択する：私は、部屋：2とアプリでは、この写真のように、1階と2部屋のすべてのレコードを表示する：

my problem

私の英語は大変申し訳ありません。

Answer 1

はちょうどあなたのngのリピートで、このようにフィルタを使用します。

あなたがチェーン化フィルタを使用する代わりに、それが一致する必要があり、オブジェクトマスクに比較しているのでhapens

<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 = [{ 
 
     \t "location":"Łepkowskiego D", 
 
     \t "floor":"I", 
 
     \t "surface":55.70, 
 
     \t "rooms":3, 
 
     \t "price":6200 
 
     }, 
 
     { 
 
     \t "location":"Łepkowskiego A", 
 
     \t "floor":"II", 
 
     \t "surface":52.18, 
 
     \t "rooms":4, 
 
     \t "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"> 
 
     \t <option value="" disabled selected>Wybierz lokalizacje...</option> 
 
     \t <option value="Łepkowskiego D">Łepkowskiego D</option> 
 
     </select> 
 
     </p> 
 
     
 
     <p> 
 
     \t <span>Liczba pokoi: {{rooms}}</span> 
 
     \t <input type="range" ng-model="rooms" min="1" max="5"> 
 
     </p> 
 
     
 
     <p> 
 
     \t <span>Piętro: {{floor}}</span> 
 
     \t <select ng-model="floor" class="form-control"> 
 
     \t \t <option value="" disabled selected>Wybierz piętro</option> 
 
     \t \t <option value="Parter">Parter</option> 
 
     \t \t <option value="I">Piętro I</option> 
 
     \t \t <option value="II">Piętro II</option> 
 
     \t \t <option value="III">Piętro III</option> 
 
     \t \t <option value="IV">Piętro IV</option> 
 
     \t \t <option value="V">Piętro V</option> 
 
     \t \t <option value="VI">Piętro VI</option> 
 
     \t </select> 
 
     </p> 
 
    
 
     <table border="1"> 
 
      <tr> 
 
     \t <th>Location</th> 
 
     \t <th>Floor</th> 
 
     \t <th>Surface</th> 
 
     \t <th>Liczba pokoi</th> 
 
     \t <th>Price</th> 
 
      </tr> 
 
      <tr ng-repeat="flat in flats | filter:{ location:location, floor:floor, rooms:rooms }"> 
 
     \t <td>{{flat.location}}</td> 
 
     \t <td>{{flat.floor}}</td> 
 
     \t <td>{{flat.surface}}</td> 
 
     \t <td>{{flat.rooms}}</td> 
 
     \t <td>{{flat.price}}</td> 
 
      </tr> 
 
     </table> 
 
    </div>