How can I implement $('input').on('change', function() in angularjs

Question

I need to do a registration form page using angularjs and in this i need to show how many percentage have completed. I have more than 50 fields. How i can do this functionality in a simple way.

Here is the sample code. I don't know is this the good way of coding

HTML Code

 <script src="angular/angular.js"></script>
 <html ng-app="myapp" ng-controller='profileController'>
 <form>
   First name: <input type="text" name="firstname" ng-model="nameValue" ng-click="percentageCount()"/><br>
   Last name: <input type="text" name="lastname" ng-model="lnameValue" ng-click="percentageCount()"/>
   Age: <input type="text" name="age" ng-model="ageValue" ng-click="percentageCount()" />
   Gender: <input type="text" name="gender" ng-model="genderValue" ng-click="percentageCount()"/>
   City:  <select name="txt_country" class="drop-down-box" id="country" ng-click="percentageCount()" ng-model="countryValue">
                        <option value="" selected="selected">Select Country</option>
                        <option value="United States">United States</option>
                        <option value="United Kingdom">United Kingdom</option>
                        <option value="Afghanistan">Afghanistan</option>
                        <option value="Albania">Albania</option>                    
                      </select>

</form>
<p>{{count}}% completed</p>
</html>

Script

<script>

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

myapp.controller('profileController', function ($scope,$http) 
{
    $scope.count = 0;
    $scope.percentageCount = function()
    {
        $scope.count =0;

        if($scope.nameValue != null)
          $scope.count = $scope.count+20;
        if($scope.lnameValue != null)
          $scope.count = $scope.count+20;  
        if($scope.ageValue != null)
          $scope.count = $scope.count+20;
        if($scope.genderValue != null)
          $scope.count = $scope.count+20;   
        if($scope.countryValue != null)
          $scope.count = $scope.count+20;       

    }

});

</script>

here I need to use lots of if condition.

In jquery we can do this using

$('input').on('change', function()

How i can do this in angularjs as a good way of coding

Thank you in advance.

JB Nizet · Accepted Answer · 2015-07-29 06:20:55Z

1

Instead of trying to recompute the count and storing the result in the scope every time something changes by binding an event listener, you can simply bind the count in the template to a function call:

<p>{{ percentageCount() }}% completed</p>

myapp.controller('profileController', function ($scope,$http) {
    $scope.percentageCount = function() {
        var count = 0;

        if ($scope.nameValue != null)
          count += 20;
        if ($scope.lnameValue != null)
          count += 20;
        if($scope.ageValue != null)
          count += 20;
        if($scope.genderValue != null)
          count += 20; 
        if($scope.countryValue != null)
          count += 20;     

        return count;
    }
});

At each digest cycle (every time some event is triggered and changes the scope), angular will call this function and refresh the value in the page if the result has changed. But since this function is simple and fast, that won't cause any problem.

If the rule for each property is always the same (increment of 100 divided by the number of properties), you can rewrite the above function like the following:

var props = ['nameValue', 'lnameValue', 'ageValue', 'genderValue', 'countryValue'];

$scope.percentageCount = function() {
        var count = 0;
        angular.forEach(props, function(prop) {
            if ($scope[prop]) {
                count += (100 / props.length);
            }
        });
        return count;
    }
});

edited Jul 29, 2015 at 6:20

answered Jul 29, 2015 at 6:03

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1187 Over a year ago

but i have more that 50 fields.

JB Nizet Over a year ago

So what? That will only change the JavaScript percentageCount() function. That you'll have to implement whatever the solution you choose.

user1187 Over a year ago

for all the 50 fields i have to check if it is null or not

JB Nizet Over a year ago

See my edited answer. That's your business logic. It has nothing to do with your question. You would have to do something similar with jQuery as well, wouldn't you?

user1187 Over a year ago

yes . i am new in angularjs. so I need a better solution

|

Kirill Slatin · Accepted Answer · 2015-07-29 05:54:02Z

0

Angular provides a set of directives for all basic DOM manipulation. When starting to go AngularJS from JQuery world it's a good rule to always search for an appropriate directive and never use JQuery.

In your case ng-change will do the same trick similar to $('input').change()

answered Jul 29, 2015 at 5:54

Kirill Slatin

6,1823 gold badges21 silver badges39 bronze badges

2 Comments

user1187 Over a year ago

but i have to give ng-change for all the input types. Is there anything that i can do similar like jquery in angular js

Kirill Slatin Over a year ago

You should go model oriented, not DOM element oriented. Take a look at @SamuelNeff's answer. In the background it does the same but has a different all-in-one-place syntax. You list model properties or provide ng-change="updatePercentage()" to all inputs that are relevant

Samuel Neff · Accepted Answer · 2015-07-29 05:55:34Z

0

Instead of attaching event handlers to the inputs, watch the model for changes. Watch all of the model properties at once so if any changes your handler only gets called once for a group of changes.

var props = ['nameValue', 'lnameValue', 'ageValue', 'genderValue', 'countryValue'];

$scope.$watchGroup(props, valuesChanged);

function valuesChanged() {
    var count = 0;

    props.forEach(function(prop) {
        if ($scope[prop] != null) {
            count += 20;
        }
    });

    $scope.count = count;
}

answered Jul 29, 2015 at 5:55

Samuel Neff

75.3k18 gold badges144 silver badges186 bronze badges

4 Comments

user1187 Over a year ago

so in html no need to give ng-click

JB Nizet Over a year ago

@Athi what makes you think that? No, you don't. Every time you change something in an input, the ng-model directive will update the corresponding field in the scope. That will automatically cause the valuesChanged watcher to be called and thus the count to be recomputed.

user1187 Over a year ago

'valuesChanged is not defined' its throws error is there anything i have to do any changes in this code

Samuel Neff Over a year ago

@Athi, valuesChanged is the function declared above. Did you copy the code exactly as above?

Collectives™ on Stack Overflow

How can I implement $('input').on('change', function() in angularjs

3 Answers 3

6 Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related