CODEWITHSUNDEEP
javascriptjqueryangularjs
A.S.F Studio
A.S.F Studio

Reputation: 43

Angular bind from the controller to the input field

I have the following JSfiddle example.

HTML

<div ng-app="app" ng-controller="Example">
  <input type="number" ng-model="data.mainOdd1" placeholder="#1 Main Odd" onfocus="this.placeholder=''" min="0" step="any" ui-blur="testfn('mainOdd1', $event, '#1 Main Odd');">
</div>

Javascript

angular
  .module('app', [])
  .directive('uiBlur', function($parse) {
    return function(scope, elem, attrs) {
      elem.bind('blur', function(event) {
        scope.$apply(function() {
          $parse(attrs.uiBlur)(scope, {
            $event: event
          });
        });
      });
    };
  })
  .controller('Example', function($scope) {
    $scope.data = {
      'mainOdd1' : '',
    };

    $scope.testfn = function(propertyName, $event, placeHolder) {
      debugger;
      if (($event.target.validity.valid == false) ||
            ($scope.data[propertyName] == ''))
      {
        $scope.data[propertyName] = '';
        $event.target.placeholder = placeHolder;
        return;        
      }
      debugger;    
      $scope.data[propertyName] = $scope.data[propertyName].toFixed(2);
    };
  });

I try to keep only two decimals.

I see two issues, the first one is that the number in the view does not change, although mainOdd1 does change. and the second one is that I get an error in the console about using the toFixed function.

What am I doing wrong here?

Thanks

Upvotes: 0

Views: 151

Answers (4)

Bowen Li
Bowen Li

Reputation: 397

run the snippet to solve both of your issues:

angular
  .module('app', [])
  .directive('uiBlur', function($parse) {
    return function(scope, elem, attrs) {
      elem.bind('blur', function(event) {
        scope.$apply(function() {
          $parse(attrs.uiBlur)(scope, {
            $event: event
          });
        });
      });
    };
  })
  .controller('Example', function($scope) {
    $scope.data = {
      'mainOdd1' : '',
    };

    $scope.testfn = function(propertyName, $event, placeHolder) {
      if (($event.target.validity.valid == false) ||
            ($scope.data[propertyName] == ''))
      {
        $scope.data[propertyName] = '';
        $event.target.placeholder = placeHolder;
        return;        
      }
      $scope.data[propertyName] = parseFloat($scope.data[propertyName]).toFixed(2);
    };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<div ng-app="app" ng-controller="Example">
  <input type="text" ng-model="data.mainOdd1" placeholder="#1 Main Odd" onfocus="this.placeholder=''" min="0" step="any" ui-blur="testfn('mainOdd1', $event, '#1 Main Odd');">
</div>

Upvotes: 0

brk
brk

Reputation: 50291

The problem is with this line

$scope.data[propertyName].toFixed(2)

Use Unary plus to convert it to number

$scope.data[propertyName] = +$scope.data[propertyName].toFixed(2);

Upvotes: 0

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48327

Your input is type="number".You must use this

$scope.data = {
  'mainOdd1' : 0,
};

and can use step=0.01 for input in order to have only two decimals

Upvotes: 0

Gayathri Mohan
Gayathri Mohan

Reputation: 2962

Hi toFixed Error happening because of while converting toFIxed it will become String but your input type in number so it wont accept so u have to change to float

 $scope.testfn = function(propertyName, $event, placeHolder) {
      debugger;
      if (($event.target.validity.valid == false) ||
            ($scope.data[propertyName] == ''))
      {
        $scope.data[propertyName] = '';
        $event.target.placeholder = placeHolder;
        return;        
      }
      debugger;    
      $scope.data[propertyName] = parseFloat($scope.data[propertyName].toFixed(2));
    };

Upvotes: 1

Related Questions