VK Chikkadamalla VK Chikkadamalla - 9 months ago 44
AngularJS Question

Based on Text field automatically fillup in the progress in Ionic angularjs

I need to show progress bar when i entered the fields.

Based on fields fillup automatically need to show the proress bar using angularjs in ionic.

enter image description here

Answer Source

I made the following codepen:


You need to track the progress based on the validation of the input.

  function validateInput(input, arrayLength) {
    if (!input.validated && input.model.length > 3) {
      vm.validationProgress = vm.validationProgress + (100 / arrayLength);
      input.validated = true;
    } else if (input.validated && input.model.length <= 0) {
      input.validated = false;
      vm.validationProgress = vm.validationProgress - (100 / arrayLength);

This code can be improved upon, and you should probably find a better solution to it, but it should point you in the right direction.

If an input is validated = true, I color the progressbox for that input green.

<div ng-repeat="input in vm.inputfields" ng-class="{ 'validated' : input.validated }" class="validation-item">