Reputation: 4946

Input will not update onblur with ng-blur

I am trying to do something that should be pretty simple. When a user tabs out of an input field, I want to take their value and change the value to contain two decimal places for each number even .00

I have a working plunkr

Here is the HTML

<input type="text" class="form-control" only-digits ng-blur="vm.cleanNumbers(vm.order.frameInformation.A)" ng-model="vm.order.frameInformation.A">

The controller is getting called and the value is changed but the input never reflects the change

function cleanNumbers(value) {
    if (value !== 0) {
        var hasDecimal = value.indexOf('.') > -1;
        value = value.replace('$', '');
        value = value.replace(/[,]+/g, '');
        value = parseFloat(value);

        if (isNaN(value)) {
            return 0;
        }

        value = value.toFixed(2);
    }
}

In the plunkr I'm logging the values and seeing what I would hope for the input to update with.

Upvotes: 0

Answers (2)

Sravan

Reputation: 18647

Here is your required answer.

The first issue is to use the controller as Syntax,

ng-controller="test as vm"

Since you are converting the value to Float and trying to display it in the text field, you are getting the same value since the text value of a float is same as the text.

You have to convert the float back to string to display as you like.

Here is the revised code,

// Code goes here

(function () {
    'use strict';

    angular
        .module('admin', [])
        .controller('test', test);
        
        test.$inject = ['$log'];

    function test($log) {
      
      $log.debug('controller loaded');
        /*jshint validthis: true */
        let vm = this;
        vm.order = {};
        
        vm.cleanNumbers = cleanNumbers;
        
        function cleanNumbers(test) {
          $log.debug(test);
          let value = vm.order[test];
          if (value != 0 && value != undefined) {
                var hasDecimal = value.indexOf('.') > -1;
                value = value.replace('$', '');
                value = value.replace(/[,]+/g, '');
                value = parseFloat(value);

                if (isNaN(value)) {
                    return 0;
                }

                //value = value.toFixed(2);
                function toNumberString(num) { 
                   return value.toString() + ".00"
                }
                
                vm.order[test] = toNumberString(value);
                console.log(value);
                console.log(vm.order);
          }
        }
    }
        
})();

<!DOCTYPE html>
<html ng-app="admin">

  <head>
    <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="test as vm">
    <div class="col-md-4">
      {{vm.order}}
      <div class="form-group">
        <label class="control-label">A</label>
        
        <input type="text" class="form-control" ng-blur="vm.cleanNumbers('A')" ng-model="vm.order.A" />
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <label class="control-label">B</label>
        <input type="text" class="form-control" ng-blur="vm.cleanNumbers('B')" ng-model="vm.order.B" />
      </div>
    </div>
  </body>

</html>

PLEASE run above SNIPPET

HERE IS A WORKING DEMO

Upvotes: 1