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

【问题标题】：input range filter for a data in ng-repeatng-repeat 中数据的输入范围过滤器
【发布时间】：2018-12-17 18:59:24
【问题描述】：

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

【问题讨论】：

您需要根据您的过滤范围创建子数组，然后您可以在 ng-repeat 中使用该子数组
这是个问题.. 怎么样？

标签： angularjs angularjs-ng-repeat angular-ui-bootstrap

【解决方案1】：

只需将模型添加到您的输入值并将模型传递给过滤器指令，如下所示：

<!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 到 13000 例如

【解决方案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>

【讨论】：

和javascript？
那是 angularjs 代码，你不需要做任何事情。当您在该输入框中键入时，AngularJS 将处理它作为过滤列表。
anw ng-model="search.price" **********
我已经向您指出了如何做到这一点。如果做得好，请不要忘记投票并标记为正确答案。