Archiv der Kategorie: Angular JS

Angular.js: Conditional filtering of list

I just spent 2 hours in finding a solution. In case anybody else needs this:

I want to filter a list. Not all the time, but conditional. In my case only if a checkbox is checked. If experimented with if and various custom filter solutions.

This is the very simple solution using unique from the ui.utils package:

HTML

<html>
<head>
  <script src="ui-utils/ui-utils.min.js"></script>
</head>
<body>
<input 
  type="checkbox" 
  ng-model='variable_with_field' 
  ng-true-value="field_to_be_filtered"
>
<tr 
  data-ng-repeat="release in 
  filtered = (releases | unique:variable_with_field )"
>
  <td>do some outputs</td>
</tr>
</body>
</html>

JS:

var clientApp = angular.module('clientApp', [ 'ui.utils' ]);
$scope.variable_with_field = false;

Initially the list is not filtered. If the checkbox is checked all duplicates are removed. If the duplicates should be removed already on load set $scope.variable_with_field on the field_name.