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.
3 answers
solution1
1 ACCPTED 2015-07-29 06:03:26
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;
}
});
solution2
0 2015-07-29 05:54:02
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()
solution3
0 2015-07-29 05:55:34
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.