VK Chikkadamalla VK Chikkadamalla - 21 days ago 5
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

I made the following codepen:

http://codepen.io/anon/pen/ZBBGgj

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

  function validateInput(input, arrayLength) {
    console.log(input);
    if (!input.validated && input.model.length > 3) {
      vm.validationProgress = vm.validationProgress + (100 / arrayLength);
      input.validated = true;
      console.log(vm.validationProgress);
    } 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">