简体   繁体   English

AngularJS。 ng-repeat中的Filter中的多个条件

[英]AngularJS. Multiple conditions in Filter in ng-repeat

Why my condition doesn't work if I put the first of any condition. 如果我把任何一个条件放在首位,为什么我的条件不起作用。

  1. I put 100 in the PriceTo => I get all items, where price > 100 我在PriceTo中放了100 =>我得到了所有商品,其中价格> 100
  2. I put "App" in the Name => nothing changes But I should get items where (price > 100) AND (Name contains "App"). 我在名称中放置了“ App” =>没什么变化,但是我应该得到(价格> 100)且(名称包含“ App”)的项目。

fiddle: http://jsfiddle.net/QHtD8/142/ 小提琴: http//jsfiddle.net/QHtD8/142/

JS: JS:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.products = [
        {name:"Apple",type:"fruit",price:100},
        {name:"Grape",type:"fruit",price:500},
        {name:"Orage",type:"fruit",price:555},
        {name:"Carrot",type:"vegetable",price:1000},
        {name:"Milk",type:"dairy",price:800}
    ];

    $scope.productFilter = function (item) {1
        var result = item.name === $scope.foodName ||
                             item.price >= $scope.priceFrom ||
                   item.price <= $scope.priceTo;
            return result;
        };

}

HTML: HTML:

    <div ng-controller="MyCtrl">
    Name
    <input ng-model="foodName" /><br>
    Price from
    <input ng-model="priceFrom" /><br>
    Price to
    <input ng-model="priceTo" /><br>
    <ul>
        <li ng-repeat="item in products | filter:productFilter">
          {{item.name}} - {{item.price}}
        </li>
    </ul>
</div>

Example

You have a wrong conditions in your filtration function. 您的过滤功能条件错误。

Try the following: 请尝试以下操作:

$scope.productFilter = function (item) {
        var result = (!$scope.foodName || item.name.toLowerCase().includes($scope.foodName.toLowerCase())) && 
                     (!$scope.priceFrom || item.price >= $scope.priceFrom) &&
                     (!$scope.priceTo || item.price <= $scope.priceTo);

        return result;
    };

Here is jsfiddle 这是jsfiddle

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM