添加<和>登錄ng-repeat並進行相應過濾

Question

我在HTMl頁面上有一些關於自行車的數據，這些數據在頁面上有一些過濾器，例如“品牌”，“年份”和價格。 雖然品牌和年份過濾器工作正常，但是價格過濾器存在一些問題。

因此，我必須少然后多然后有條件地簽字。 我必須顯示<然后以價格50000簽名並>以價格500000簽名。並相應地應用過濾器

http://jsfiddle.net/zL4x971f/

<div ng-app='app' class="filters_ct" ng-controller="MainCtrl as mainCtrl">
    <ul class="nav">
        <li ng-repeat="filter in filters" ng-class="{sel: $index == selected}">
            <span class="filters_ct_status"></span>
            {{filter.name}}

            <ul>
                <li ng-repeat="filterValue in filter.lists">
                  <input ng-checked="activeFilters.brand[filterValue] !== undefined" ng-click="toggleFilter(filter.name, filterValue)" type="checkbox">  {{filterValue}}
                </li>
            </ul>
        </li>
    </ul>

    <div ng-controller="ListCtrl as listCtrl">
        <div class="list" ng-repeat="list in lists | filter: activeFilters">
            {{list.brand}},
            {{list.year}} ,
            {{list.price}}
        </div>

        </div>

</div>

角度的

var app = angular.module('app', []); 

    app.controller('MainCtrl', function($scope) {

        $scope.activeFilters = {

        };

        $scope.filters = [
                {
                    name: "brand",
                    lists: ['yamaha','ducati','KTM','honda']
                },
                {
                    name: "year",
                    lists: [2012,2014,2015]
                },{
                name:"price",
                lists:[50000,100000,20000,500000]
                }
            ];

        $scope.toggleFilter= function(filterName, filterValue) {

            if ($scope.activeFilters[filterName] === undefined) {

                $scope.activeFilters[filterName] = filterValue;
            } else {

                delete $scope.activeFilters[filterName];
            }
        };

    });


    app.controller('ListCtrl', function($scope) {

        $scope.lists = [
                {
                    "brand": "ducati",
                    'year': 2012,
                    'price':40000
                },
                {
                    'brand': "honda",
                    'year': 2014,
                    'price':50000
                },
                {
                    'brand': "yamaha",
                    'year': 2015,
                    'price':200000
                },
                {
                    'brand': "KTM",
                    'year': 2012,
                    'price':500000
                },
                 {
                    'brand': "KTM",
                    'year': 2015,
                    'price':800000
                }

            ];

    });

Answer 1

我認為實現此目標的最佳方法是編寫自定義過濾器。 另外，請記住要更新價格復選框，以便用戶一次只能選擇一個。 您可以在這里查看： http : //jsfiddle.net/so9x7qpy/

 angular.module('app', []) .controller('MainCtrl', function($scope) { $scope.activeFilters = {}; $scope.filters = [ { name: "brand", lists: ['yamaha','ducati','KTM','honda'] }, { name: "year", lists: [2012,2014,2015] }, { name:"price", lists:['< 50000', '50000','100000','200000','500000', '> 500000'] } ]; $scope.toggleFilter= function(filterName, filterValue) { if (!$scope.activeFilters[filterName]) { $scope.activeFilters[filterName] = []; return $scope.activeFilters[filterName].push(filterValue); } var curFilter = $scope.activeFilters[filterName]; var i = curFilter.indexOf(filterValue); if (i === -1) { curFilter.push(filterValue); } else { curFilter.splice(i, 1); } if (filterName === 'price' && curFilter.length > 1) { curFilter.shift(); } }; }) .controller('ListCtrl', function($scope) { $scope.lists = [ { "brand": "ducati", 'year': 2012, 'price':40000 }, { 'brand': "honda", 'year': 2014, 'price':50000 }, { 'brand': "yamaha", 'year': 2015, 'price':200000 }, { 'brand': "KTM", 'year': 2012, 'price':500000 }, { 'brand': "KTM", 'year': 2015, 'price':800000 } ]; }) .filter('myFilter', function() { return function(data, filter) { var list = []; for (var i = 0; i < data.length; i++) { var item = data[i]; if (filter.brand && filter.brand.length > 0 && filter.brand.indexOf(item.brand) === -1) continue; if (filter.year && filter.year.length > 0 && filter.year.indexOf(item.year) === -1) continue; if (filter.price && filter.price.length > 0) { var re = /<|>/; if (re.test(filter.price)) { if (eval(item.price + filter.price)) { list.push(item); } } else { if (eval(item.price == filter.price)) { list.push(item); } } } else { list.push(item); } } return list; } }); 

 .sel { color:red } .nav > li { float:left; list-style:none; padding-right:20px } .subul { display:none } .sel ul { display:block; list-style:none; padding-left:0 } .list { padding-top:30px; clear:both } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app' class="filters_ct" ng-controller="MainCtrl as mainCtrl"> <ul class="nav"> <li ng-repeat="filter in filters" ng-class="{sel: $index == selected}"> <span class="filters_ct_status"></span> {{filter.name}} <ul> <li ng-repeat="filterValue in filter.lists"> <input ng-checked="activeFilters[filter.name] && activeFilters[filter.name].indexOf(filterValue) !== -1" ng-click="toggleFilter(filter.name, filterValue)" type="checkbox"> {{filterValue}} </li> </ul> </li> </ul> <div ng-controller="ListCtrl as listCtrl"> <div class="list" ng-repeat="list in lists | myFilter: activeFilters"> {{list.brand}}, {{list.year}} , {{list.price}} </div> </div> </div> 

Answer 2

如前所述。.請參閱下面帶有客戶過濾器的工作JSFiddle，並如前所述

woking JSFiddle ： http : //jsfiddle.net/hrishi1183/zL4x971f/6/

Answer 3

如果您想嚴格按照價值搜索，可以使用

<div class="list" ng-repeat="list in lists | filter: activeFilters:true">

            {{list.brand}},
            {{list.year}} ,
            {{list.price}}
        </div>

但是，如果您打算使用一些自定義過濾器，則此鏈接可以為您提供幫助

范圍之間的AngularJS過濾