Can anyone explain why when you click on the checkbox filter is triggered? What is relevant in this comparison checkbox to the filter?

angular.module('App.filters', []).filter('dummyFF', [ function() { return function(input, a) { console.log(input, a); return input; }; } ]); var app = angular.module('plunker', ['App.filters']); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.cars = [{ model: '316', make: 'Bmw' }, { model: '520', make: 'Bmw' }, { model: 'Fiesta', make: 'Ford' }, { model: 'Focus', make: 'Ford' }, { model: 'Clio', make: 'Renault' }, { model: 'Toledo', make: 'Seat' }, { model: 'Leon', make: 'Seat' }, { model: 'Insignia', make: 'Opel' }, { model: 'Astra', make: 'Opel' }, { model: 'Corsa', make: 'Opel' }]; }); 
 <!DOCTYPE html> <html ng-app="plunker"> <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="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <p>Hello {{name}}!</p> <div ng-repeat="car in cars | dummyFF:{s:car.make}">{{car.make}}</div> <input type="checkbox" ng-model="useMakesgg[$index]" ng-checked="true" /> </body> </html>

    1 answer 1

    Perhaps I am mistaken, knowledgeable people will correct me.

    The bottom line is that you have a ng-model hanging on the checkbox, which means it is tied to $ scope.

    An angular for all such fields (as well as data in {{}} brackets) adds a watch to keep track of changes. Angulyar in order to understand exactly where the data has changed, you need to call $ scope. $ Digest (), which polls all the patches in a loop. This causes your filter to be called.

    This is how the famous two way data binding works.

    In general, I advise you to read an sensible article on this topic .