Question

我正在构建一个具有输入范围侧边栏的应用程序[如100米，200米......]

然后我的主要内容正文包含文章（存储在角度数组中）。

我想用输入范围过滤文章（按距离）。

我该怎么做？

目前我试图解析ng-model INSIDE ng-repeat的过滤器但不起作用（是的，我是一个菜鸟......）。

在此处查看应用：http://nicolaslarzilliere.fr/dev/

提前致谢。

[对不起语言，我是法国人]

$(window).load(function(){
	
	var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
	
	$('#menu').on(clickOrTouch, function() {
		$('#sidebar').toggleClass('open_sidebar');
		$('#page').toggleClass('move_page');
	});
	
	$('section').hammer().on('tap', function() {
		$('section .description').not($(this).find('.description')).animate({
			'height' : '0px'
		}, 200);
		$('.arrow').not($(this).find('.arrow')).removeClass('rotate');
		$(this).find('.description').animate({
			'height' : '115px'
		}, 200);
		$(this).find('.arrow').addClass('rotate');
	});
	
});

var app = angular.module("Resto",[]);

	
app.controller('Restaurants', function($scope){
	
	var val = $('input[type=range]').val();
	$scope.greaterThan = function(prop, val){
		
		console.log($('input[type=range]').val());
	    return function(item){
	    	if (item[prop] >= val) return true;
	    }
	}
	
	$scope.etablissement = [	
		{
			name: 'Pub Le Galway',
			distance: '800',
			plat: 'Tenneessee Rosti burger',
		},
		{
			name: 'Pub Le Galway',
			distance: '500',
			plat: 'Poulet rôti',
		},
		{
			name: '',
			distance: '200',
			plat: 'Coquilles Saint Jacques',
		},
		{
			name: 'Pub Le Galway',
			distance: '100',
			plat: 'Foie Gras Poêlé',
		},
	]; 
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="Resto">
	<header class="row">
		<div class="col-xs-2">
			<span class="ion-navicon" id="menu"></span>
		</div>
	</header>
	<div id="sidebar" class="col-xs-9" ng-controller="Restaurants">
		<input type="range" min="100" ng-change="greaterThan()" step="100" max="1000" value="{{value}}" ng-model="value" />
		<span>{{value}}</span>
	</div>
	<div id="page" class="row" ng-controller="Restaurants">
		<section class="row min" ng-repeat="restaurant in etablissement | filter: greaterThan('distance', '') | orderBy: 'distance'">
			<div class="col-xs-9 ion-arrow-down-b arrow">
				<h1>{{restaurant.plat}}</h1>
			</div>
			<div class="col-xs-3">
				<h2 class="ion-ios-location">{{restaurant.distance}} m</h2></span>
			</div>
			<div class="row description">
				<hr>
			</div>
		</section>
	</div>
</body>

Answer 1

在输入上设置模型，然后使用该模型过滤重复结果。

<input name="someinputnumber" ng-nodel="numberFilterValue" />
<div ng-repeat="thing in list | filter: greaterThan(thing.distance, numberFilterValue)">
  {{thing.name}}
</div>

//OR

<div ng-repeat="thing in list" ng-show="greaterThan(thing.distance, numberFilterValue)">
  {{thing.name}}
</div>

根据输入点击事件动态过滤ng-repeat

1 个答案: