Question

我想要过滤所有数据以显示我的所有葡萄酒超出我必须在输入范围内输入的值。我应该用自己的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>

Answer 1

只需将模型添加到您的输入值中，然后将模型传递给filter指令，如下所示：

<!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>

Answer 2

要过滤价格，请按以下步骤操作：

<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>

ng-repeat中数据的输入范围过滤器

2 个答案: