CODEWITHSUNDEEP
angularjs
Dylan Czenski
Dylan Czenski

Reputation: 1375

AngularJS displays only elements that meet a certain condition

in my ng-repeat list I am displaying object elements from an object array $scope.toBuy:

$scope.toBuy=[
             cookies={
                name:'cookies',quantity:0,bought:false
            },
            water={
                name:'water',quantity:0,bought:false
            },
            bananas={
                name:'bananas',quantity:0,bought:false
            },
            milk={
                name:'milk',quantity:0,bought:false
            },
            coconut={
                name:'coconut',quantity:0,bought:false
            }
        ];

and I initialize all element's bought field to false. How do I display in a ng-repeat list that only shows elements that have false value in their bought field? I tried this:

<ul>
         <li ng-repeat="item in toBuy |  filter:{item.bought===false }">Buy 10 {{item.quantity}} {{item.name}} <button class="btn btn-default" ng-click="btnOnClick(item.name)"> Bought</button></li>

     </ul>

but none of the elements displayed when the page is loaded. If I removed the filter, the whole list displays, which means I applied the filter wrong.

Upvotes: 0

Views: 925

Answers (4)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27222

Your JSON is not a valid JSON.

enter image description here

Try this valid JSON :

[{
    "name": "cookies",
    "quantity": 0,
    "bought": true
}, {
    "name": "water",
    "quantity": 0,
    "bought": true
}, {
    "name": "bananas",
    "quantity": 0,
    "bought": true
}, {
    "name": "milk",
    "quantity": 0,
    "bought": false
}, {
    "name": "coconut",
    "quantity": 0,
    "bought": false
}]

Working demo :

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

myApp.controller('MyCtrl', function($scope) {
     $scope.toBuy=[{
    	"name": "cookies",
    	"quantity": 0,
    	"bought": true
    }, {
    	"name": "water",
    	"quantity": 0,
    	"bought": true
    }, {
    	"name": "bananas",
    	"quantity": 0,
    	"bought": true
    }, {
    	"name": "milk",
    	"quantity": 0,
    	"bought": false
    }, {
    	"name": "coconut",
    	"quantity": 0,
    	"bought": false
    }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
   <ul>
         <li ng-repeat="item in toBuy |  filter : {bought:false}">Buy 10 {{item.quantity}} {{item.name}} <button class="btn btn-default" ng-click="btnOnClick(item.name)"> Bought</button></li>
     </ul>
</div>

Upvotes: 1

Avnesh Shakya
Avnesh Shakya

Reputation: 3906

Try this:

<li ng-repeat="item in toBuy |  filter:item.bought==false">

Or

<li ng-repeat="item in toBuy |  filter:{bought:false}">

Will work, the second is a better way to achieve this.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171690

You are using invalid javascript object syntax {item.bought===false }

Change to 

ng-repeat="item in toBuy |  filter:{bought:false }"

DEMO

Upvotes: 2

Rai Vu
Rai Vu

Reputation: 1635

Use ng-if (or ng-show):

<div ng-repeat="item in toBuy">
   <div ng-if="item.bought===false">
      Buy 10 {{item.quantity}} {{item.name}} 
   </div>
</div>

Upvotes: 0

Related Questions