AngularJS只显示符合特定条件

Question

在我ng-repeat名单，我从一个对象数组$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 
      } 
     ]; 

，我初始化所有元素的bought场false。如何在ng-repeat列表中显示仅显示bought字段中具有false值的元素？我尝试这样做：

<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> 

但加载页面时显示没有的元素。如果我删除了过滤器，则会显示整个列表，这意味着我错误地应用了过滤器。

Answer 1

您正在使用无效的JavaScript对象语法{item.bought===false }

更改为

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

DEMO

Answer 2

使用NG-IF（或NG-显示）：

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

Answer 3

试试这个：

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

或者

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

会的工作，二是更好的方式来实现这一目标。

Answer 4

您的JSON不是valid JSON。

试试这个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 
}] 

工作演示：

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

 
myApp.controller('MyCtrl', function($scope) { 
 
    $scope.toBuy=[{ 
 
    \t "name": "cookies", 
 
    \t "quantity": 0, 
 
    \t "bought": true 
 
    }, { 
 
    \t "name": "water", 
 
    \t "quantity": 0, 
 
    \t "bought": true 
 
    }, { 
 
    \t "name": "bananas", 
 
    \t "quantity": 0, 
 
    \t "bought": true 
 
    }, { 
 
    \t "name": "milk", 
 
    \t "quantity": 0, 
 
    \t "bought": false 
 
    }, { 
 
    \t "name": "coconut", 
 
    \t "quantity": 0, 
 
    \t "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>