I have an array of objects in scope, which I'm looping over with ng-repeat. I want to filter out some elements based on their values, but it seems like ng-if is completely ignored.
I've set up this simple plunk to illustrate: http://plnkr.co/edit/Aj0hpZQTfnkQ6BYG8DRb.
Here's the controller:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.events = [
{key: "ClassName", value: "exception", age:12},
{key: "Message", value: "oops", age: 25},
{key: "Stack", value: null, age: 35}
]
});
And the HTML template:
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<ul>
<li ng-repeat="event in events" ng-if="event.age > 20">
[{{$index + 1}}] {{event.key}}: {{event.value}} - {{event.age}}
</li>
</ul>
</body>
</html>
The ng-if directive is supposed to filter out the first element of the array, bit it is displayed anyway. What have I missed that ignores the ng-if?
