代码之家  ›  专栏  ›  技术社区  ›  zerokira

带ng重复的过滤器

  •  0
  • zerokira  · 技术社区  · 6 年前

    我在试着做一个过滤器 angularJs 打电话 ng-repeat 过滤器的工作原理如下: 当你点击 checkbox 在数组中筛选具有 offers ,我用一个函数来过滤,我认为有一个更好的方法不用那么多代码。

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http, $document) {
    
        $scope.items = [
            {
                id: 0,
                description: "Primer Item 1",
                offers: [
                    {
                        id: 0,
                        name: "Casa"
                    }
                ]
            },
            {
                id: 1,
                description: "Segundo Item 2"
            },
            {
                id: 2,
                description: "Tercer Item 3"
            },
            {
                id: 3,
                description: "Cuarto Item 4"
            },
            {
                id: 4,
                description: "Quinto Item 5"
            },
            {
                id: 5,
                description: "Sexto Item 5",
                offers: [
                    {
                        id: 1,
                        name: "Bodega"
                    }
                ]
            },
            {
                id: 6,
                description: "Septimo Item 6"
            },
            {
                id: 7,
                description: "Octavo Item 7"
            },
            {
                id: 8,
                description: "Noveno Item 8"
            },
            {
                id: 9,
                description: "Decimo Item 9"
            }
        ];
    
        $scope.filterItem = function() {
            if (!$scope.itemOffer){
                $scope.filterOffer = function(item) {
                    return item.offers && item.offers.length > 0;
                };
                $scope.itemOffer = true;
            } else {
                $scope.filterOffer = function(item) {
                    return item;
                };
                $scope.itemOffer = false;
            }
        };
    
    });
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        </head>
    
        <body ng-app="myApp" ng-controller="myCtrl">
            <input type="checkbox" name="filter" value="propertyOffer" ng-model="propertyOffer" ng-click="filterItem()">Item with offert
            <div ng-repeat="item in items | filter: filterOffer track by $index">
                {{ item }}
            </div>
        </body>
    
    </html>
    1 回复  |  直到 6 年前
        1
  •  1
  •   Joe25    6 年前

    您可以将ng if与ng repeat指令一起使用,以随意筛选包含报价的项目:

    JS代码

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http, $document) {
        $scope.offersOnly = false;
        $scope.items = [
            // Your items
        ];
    });
    

    HTML代码

    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="checkbox" ng-model="offersOnly" ng-true-value="true" ng-false-value="false"/>
        <div ng-repeat="item in items" ng-if="!offersOnly">
            {{item}}
        </div>
    
        <div ng-repeat="item in items" ng-if="offersOnly && item.offers">
            {{item}}
        </div>
    </body>