價格數據過濾器AngularJS

我想要創建一個價格過濾器，我有過濾器爲臥室和浴室工作，但要創建一個過濾器，用戶可以從中選擇價格和價格以進一步細化。價格數據過濾器AngularJS

更好的方案是根據$ scope.houses中的最低和最高價格數據生成下拉菜單，但現在我正在做夢！

控制器：

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="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> 
<select> 
    <option value="180000">&pound;180,000</option> 
    <option value="190000">&pound;190,000</option> 
    <option value="200000">&pound;200,000</option> 
    <option value="210000">&pound;210,000</option> 
    <option value="220000">&pound;220,000</option> 
    <option value="230000">&pound;230,000</option> 
    <option value="240000">&pound;240,000</option> 
</select> 
<select> 
    <option value="190000">&pound;190,000</option> 
    <option value="200000">&pound;200,000</option> 
    <option value="210000">&pound;210,000</option> 
    <option value="220000">&pound;220,000</option> 
    <option value="230000">&pound;230,000</option> 
    <option value="240000">&pound;240,000</option> 
    <option value="250000">&pound;250,000</option> 
</select> 
<div class="house-style-list"> 
    <ul> 
     <li ng-repeat="house in houses | filter:search:strict" ng-class=" {true: 'sold'}[house.sold == true]"> 
      <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> 
       <span class="sold" ng-if="house.sold">SOLD</span> 
       <span class="show-home" ng-if="house.showHome">Show Home</span> 
      </a> 
     </li> 
    </ul> 
</div>

在此先感謝。

來源

2015-05-19 Roy Barber

試試這個朋友吧http://plnkr.co/edit/28rlbnJ8eovKl5kJZMmL?p=preview。我希望這是你正在尋找的東西。我沒有時間，所以你必須努力。但我認爲這是一個好的開始。我已經使用https://github.com/prajwalkman/angular-slider滑塊

<slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound"></slider>

編輯或者試試這個：http://plnkr.co/edit/FLZGOubJ4M1iPIbt8VeP?p=preview

來源

2015-05-19 12:15:24

感謝@ Skander.B它的工作原理一種享受，但即時尋找特定的選擇菜單功能usuability移動。 –

我編輯了我的答案。看看它吧 –

完美！謝謝@ Skander.B –

價格數據過濾器AngularJS

回答

相關問題