Question

我想要创建一个价格过滤器，我有过滤器适用于卧室和浴室，但想要创建一个过滤器，用户可以从中选择价格，价格也可以进一步细化。

更好的方案是根据$ scope.houses中的最低和最高价格数据生成下拉菜单，但现在我正在做梦！

控制器：

return

查看：

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

提前致谢。

Answer 1

试试thisPlunker 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

AngularJS中的价格数据过滤器

1 个答案: