CODEWITHSUNDEEP
angularjs
Tenali_raman
Tenali_raman

Reputation: 2192

angulars's invisible keypress event

I basically from a jQuery background and I have started using angular.js a bit now, I created a small example looking at a tutorial that basically fetch's data from a url and displays it in a table, then there is a input field, using which the table can be searched and filtered, see the entire example below:

<!doctype html>
<html class="no-js" lang="" ng-app="APP">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Angular Search</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    </head>
    <body>
        <!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

        <div class="container" ng-controller="theController">
            <input type="text" ng-model="search" class="form-control">   
            <table class="table table-striped table-bordered">
                <thead>
                    <td>Id</td>
                    <td>First</td>
                    <td>Last</td>
                    <td>City</td>
                </thead>
                <tbody>
                    <tr ng-repeat="user in users | filter:search" >
                        <td>{{ user.id }}</td>
                        <td>{{ user.fname }}</td>
                        <td>{{ user.lname }}</td>
                        <td>{{ user.city }}</td>
                    </tr>
                </tbody>
            </table>
        </div>    


        <script type="text/javascript"
                src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script>
            angular.module('APP' , []).
            controller('theController' , [ '$scope' , '$http' , function($scope , $http){
                $http.jsonp('http://www.filltext.com/?rows=30&id={index}&fname={firstName}&lname={lastName}&city={city}&callback=JSON_CALLBACK').success(function(data){
                                $scope.users = data
                            }) 
            }])
        </script>        

    </body>
</html>

(You can run the script locally and it will just run quite fine , just could't turn it into a fiddle successfully)

Now i was just thinking if this was done in jQuery , i would have to have somethng like a keypress() event listener attached to the search input feild, and then on every keydown(or up or press), I would retrieve the value of the input field and use the String.prototype.indexOf() method to check if the value of the input feild matches that of any of the current table values and only the one's that matched would show and the rest would be hidden.

So well, in jQuery all the above logic would have to be programmed , but in angualar i am literally doing nothing, now my question is about the keypress() event , like i said in jQuery something like a keypress event on the input feild would be required, but here there is no keypress event at all , so how come everytime i press a key , the filtering is activated ? can anybody explain ?

EDIT:: I found another example where the a function is called everytime there is a click on an element , even though there is no ng-click or even ng-model , SEE FIDDLE , now why is the $scope.total() method called everytime the li is clicked and the active state changes ?

Upvotes: 0

Views: 183

Answers (1)

Richard Hamilton
Richard Hamilton

Reputation: 26444

It has to do with Angular's ng-model directive.

https://docs.angularjs.org/api/ng/directive/ngModel

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

This has to do with the concept of two-way data-binding. This is the synchronization of data between the model and the view.

Any changes made to the view are reflected in the model, and viceaversa.

Upvotes: 1

Related Questions