0
我建立具有与输入范围[像百米，200米...]动态过滤器根据输入点击事件
然后，我有我的主要内容主体与物品侧边栏应用程序（存储NG重复以角度阵列）。
我想用输入范围过滤文章（按距离）。
我该怎么做？
目前我试图解析ng-model INSIDE ng-repeat的过滤器，但不起作用（是的，我是一个noob ...）。
在这里看到的应用程序：http://nicolaslarzilliere.fr/dev/
在此先感谢。
[请原谅我的语言，我是法国人]
$(window).load(function(){
\t
\t var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
\t
\t $('#menu').on(clickOrTouch, function() {
\t \t $('#sidebar').toggleClass('open_sidebar');
\t \t $('#page').toggleClass('move_page');
\t });
\t
\t $('section').hammer().on('tap', function() {
\t \t $('section .description').not($(this).find('.description')).animate({
\t \t \t 'height' : '0px'
\t \t }, 200);
\t \t $('.arrow').not($(this).find('.arrow')).removeClass('rotate');
\t \t $(this).find('.description').animate({
\t \t \t 'height' : '115px'
\t \t }, 200);
\t \t $(this).find('.arrow').addClass('rotate');
\t });
\t
});
var app = angular.module("Resto",[]);
\t
app.controller('Restaurants', function($scope){
\t
\t var val = $('input[type=range]').val();
\t $scope.greaterThan = function(prop, val){
\t \t
\t \t console.log($('input[type=range]').val());
\t return function(item){
\t \t if (item[prop] >= val) return true;
\t }
\t }
\t
\t $scope.etablissement = [ \t
\t \t {
\t \t \t name: 'Pub Le Galway',
\t \t \t distance: '800',
\t \t \t plat: 'Tenneessee Rosti burger',
\t \t },
\t \t {
\t \t \t name: 'Pub Le Galway',
\t \t \t distance: '500',
\t \t \t plat: 'Poulet rôti',
\t \t },
\t \t {
\t \t \t name: '',
\t \t \t distance: '200',
\t \t \t plat: 'Coquilles Saint Jacques',
\t \t },
\t \t {
\t \t \t name: 'Pub Le Galway',
\t \t \t distance: '100',
\t \t \t plat: 'Foie Gras Poêlé',
\t \t },
\t ];
\t
});<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">
\t <header class="row">
\t \t <div class="col-xs-2">
\t \t \t <span class="ion-navicon" id="menu"></span>
\t \t </div>
\t </header>
\t <div id="sidebar" class="col-xs-9" ng-controller="Restaurants">
\t \t <input type="range" min="100" ng-change="greaterThan()" step="100" max="1000" value="{{value}}" ng-model="value" />
\t \t <span>{{value}}</span>
\t </div>
\t <div id="page" class="row" ng-controller="Restaurants">
\t \t <section class="row min" ng-repeat="restaurant in etablissement | filter: greaterThan('distance', '') | orderBy: 'distance'">
\t \t \t <div class="col-xs-9 ion-arrow-down-b arrow">
\t \t \t \t <h1>{{restaurant.plat}}</h1>
\t \t \t </div>
\t \t \t <div class="col-xs-3">
\t \t \t \t <h2 class="ion-ios-location">{{restaurant.distance}} m</h2></span>
\t \t \t </div>
\t \t \t <div class="row description">
\t \t \t \t <hr>
\t \t \t </div>
\t \t </section>
\t </div>
</body>
你能发表一些代码吗？你有没有把'ng-change'看作一种可能的解决方案？ –
你可以发表你试过的一些代码吗？ – ajmajmajma
你也许可以尝试类似filter：greaterThan（'distance'，'value'），其中value是滑块的模型，但它必须是一个整型。另外值得一提的是，混合angular和jquery并不是最好的，如果你使用angular，最好避免像jquery这样的直接dom操作。 – ajmajmajma