HTMl 페이지에 자전거에 대한 데이터가 있는데 '브랜드', '연도'및 가격과 같은 페이지에 필터가 있습니다. 브랜드 및 연도 필터가 잘 작동하지만 가격 필터에 문제가 있습니다.
그래서 저는 점점 더 작아야하고 조건부로 서명해야합니다. <다음에 가격 50000으로 서명하고> 500000 가격으로 표시해야합니다. 그리고 그에 따라 필터를 적용해야합니다.
<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
}
];
});
이를 달성하는 가장 좋은 방법은 사용자 정의 필터를 작성하는 것입니다. 또한 사용자가 한 번에 하나만 선택할 수 있도록 가격 확인란을 업데이트해야합니다. 여기에서 볼 수 있습니다 : 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다