фильтр входного диапазона для данных в ng-repeat - PullRequest
Новая
       10

фильтр входного диапазона для данных в ng-repeat

0 голосов
/ 17 декабря 2018

Все, что я хочу, чтобы фильтр для моих данных показывал все мои вина выше значения, которое я должен указать в моем диапазоне ввода.Что я должен написать в своем собственном javascript, а также html?

Итак, я использовал этот король данных: 

 "wine": [
            {
                "id": 1,
                "image": "../image/wine1.png",
                "name": "wine1",
                "price": 115000,
                "pts": 12000
                },
            {
                "id": 2,
                "image": "../image/wine2.png",
                "name": "wine2",
                "price": 120000,
                "pts": 10000

            }
]

, и я использовал этот html: 

  <input type="range" min="0" max="300000"     />

  <div  ng-repeat="wine in wines ">
                    <img ng-src="{{wine.image}}"  />
                    <p >{{wine.name | uppercase}}</p>
                    <p>{{wine.price | number}} LBP</p>
                    <p >{{wine.pts | number}} PTS</p>

                </div>

Ответы [ 2 ]

0 голосов
/ 17 декабря 2018

Просто добавьте модель к вашему входному значению и передайте модель в директиву фильтра, как показано ниже: 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>  
<body ng-app="myApp" ng-controller="validateCtrl">
<input type="range" min="0" max="300000" ng-model="search"/>

  <div  ng-repeat="wine in wines | filter:search">
                    <img ng-src="{{wine.image}}"  />
                    <p >{{wine.name | uppercase}}</p>
                    <p>{{wine.price | number}} LBP</p>
                    <p >{{wine.pts | number}} PTS</p>

  </div>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
   $scope.wines =  [
            {
                "id": 1,
                "image": "../image/wine1.png",
                "name": "wine1",
                "price": 115000,
                "pts": 12000
                },
            {
                "id": 2,
                "image": "../image/wine2.png",
                "name": "wine2",
                "price": 300000,
                "pts": 10000

            },
             {
                "id": 2,
                "image": "../image/wine2.png",
                "name": "wine2",
                "price": 120000,
                "pts": 10000

            }
]
});
</script>

</body>
</html>
0 голосов
/ 17 декабря 2018

Для фильтрации цен используйте следующее: 

<input ng-model="range.price" min="0" max="300000" value="2500"    />

<div  ng-repeat="wine in wines | filter:search">
    <img ng-src="{{wine.image}}"  />
    <p >{{wine.name | uppercase}}</p>
    <p>{{wine.price | number}} LBP</p>
    <p >{{wine.pts | number}} PTS</p>
</div>
...