I am working on creating a registration form page using AngularJS and I need to display the percentage completed. The form consists of over 50 fields, so I am looking for a simple way to implement this functionality.
Below is a snippet of the code I have written. I am not sure if this is the most efficient way to write it.
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>
As you can see, there are many 'if' conditions in the script.
In JQuery, we could achieve this using:
$('input').on('change', function()
I would like to know how to optimize this code in AngularJS for better efficiency.
Thank you for your help!