How to filter with ng-repeat in AngularJS

Question

How to filter with ng-repeat in AngularJS

Navigation

#1 by (1 votes)

0

How can I make a filter for those items that have 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: 4,
            description: "Quinto Item 5"
        },
        {
            id: 5,
            description: "Sexto Item 5",
            offers: [
                {
                    id: 1,
                    name: "Bodega"
                }
            ]
        },
        {
            id: 6,
            description: "Septimo Item 6"
        }
    ];

    $scope.filterItem = function() {
        
    };

});

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="script.js"></script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="checkbox" name="filter" value="propertyOffer" ng-model="propertyOffer" ng-click="filterItem()">Item con oferta
        <div ng-repeat="item in items">
            {{ item }}
        </div>
    </body>

</html>

javascript angularjs

asked by zerokira 27.09.2018 в 15:26

source

1 answer

Clear input type text when clicking the button By clicking on the counter button NaN returns me

score 1 · Answer 1

You can do it by adding the directive ng-if , it would be the easiest way for this simple case since you do not need additional code. Just wrap the items in a <div> , as follows:

<div ng-if="!propertyOffer || item.offers">
            {{ item }}
</div>

The expression !propertyOffer || item.offers will always be true , when the checkbox is not checked, so it will show all items . If it is "checked" it will give false ( !propertyOffer ) and show only the items that have offers as it will be evaluated in true ( item.offers )

ng-if: The ngIf directive removes or recreates a part of the DOM tree   based on an {expression}. If the assigned expression ngIf evaluates to a   false value, then the element is removed from the DOM, otherwise,   a clone of the element is re inserted into the DOM.

The syntax is: ng-if="expresión"

Working example:

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: 4,
            description: "Quinto Item 5"
        },
        {
            id: 5,
            description: "Sexto Item 5",
            offers: [
                {
                    id: 1,
                    name: "Bodega"
                }
            ]
        },
        {
            id: 6,
            description: "Septimo Item 6"
        }
    ];

    $scope.filterItem = function() {
        
    };

});

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="script.js"></script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <input type="checkbox" name="filter" value="propertyOffer" ng-model="propertyOffer" ng-click="filterItem()">Item con oferta
        <div ng-repeat="item in items">
          <div ng-if="!propertyOffer || item.offers">
            {{ item }}
          </div>
        </div>
    </body>

</html>