Comparing numbers in text fields with AngularJS

Question

Controller:

angular.module('myApp', [])
    .controller('MainCtrl', function($scope) {
        $scope.d = { v1: '100', v2: '20' };
    });

Template:

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
      1: <input type="text" ng-model="d.v1" />
      2: <input type="text" ng-model="d.v2" />
      <h4>{{d.v1}} &lt; {{d.v2}} = {{d.v1 < d.v2}}</h4>
  </div>
</div>

http://jsfiddle.net/GDfxd/292/

This example incorrectly shows that 100 is less than 20. Any advice how to make this comparison numeric ?

because they are strings not numbers, you need to convert before compare jsfiddle — Ja9ad335h
– Ja9ad335h, Commented Feb 16, 2017 at 19:51
@Jag try entering some numbers in inputs, they will be string type again — Dfr
– Dfr, Commented Feb 16, 2017 at 20:08

Niz.Dam · Accepted Answer · 2017-02-16 20:00:13Z

1

the type of your variable is "text" you have to change it to "number" to get the right result.

answered Feb 16, 2017 at 20:00

Niz.Dam

1491 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

P.S. · Accepted Answer · 2017-02-16 20:20:52Z

0

All that you need is to compare numbers instead of strings

Here is the working snippet:

angular.module('myApp', [])
    .controller('MainCtrl', function($scope) {
        $scope.d = { v1: 100, v2: 20 };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MainCtrl">
      1: <input type="text" ng-model="d.v1" />
      2: <input type="text" ng-model="d.v2" />
      <h4>{{d.v1}} &lt; {{d.v2}} = {{d.v1 < d.v2}}</h4>
  </div>
</div>

answered Feb 16, 2017 at 20:20

P.S.

16.4k14 gold badges65 silver badges86 bronze badges

Comments

Tim Harker · Accepted Answer · 2017-02-16 20:29:48Z

0

Try this, I just added an Eval function and left everything else the same!

Controller:

angular.module('myApp', [])
    .controller('MainCtrl', function($scope) {
        $scope.d = { v1: '100', v2: '20' };
        $scope.eval = function() {
           return (parseInt($scope.d.v1, 10) < parseInt($scope.d.v2, 10));
        }
    });

Template:

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
      1: <input type="text" ng-model="d.v1" />
      2: <input type="text" ng-model="d.v2" />
      <h4>{{d.v1}} &lt; {{d.v2}} = {{eval()}}</h4>
  </div>
</div>

http://jsfiddle.net/jc4vvp86/2/

edited Feb 16, 2017 at 20:29

answered Feb 16, 2017 at 20:24

Tim Harker

2,4171 gold badge17 silver badges28 bronze badges

Collectives™ on Stack Overflow

Comparing numbers in text fields with AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related