How to use condition in expression in AngularJS

Question

I'm making a small page that show how the number filter work:

Number: <input type="text" ng-model="nomber"><br/>
fractionSize: <input type="text" ng-model="fractionSize"><br/>
gives: {{ nomber | number:fractionSize }}

If i write a number, it will work, but if I decide to had a nomber in fractionSize, but than remove it, it gives me NaN.

I would like to have a condition in

{{ nomber | number:fractionSize }}

that will tell my condition to not try to use fractionSize if the input is empty.

I don't know how to use those, but I my explication should be quite enough. It's not a complicated error at all and what really matters is that I could remove ":fractionSize" from my expression if the "fractionSize" input is empty. — Kévin Duguay
– Kévin Duguay, Commented Jan 7, 2016 at 18:53
i guess the solution could be simply add <input type="number" min="0" ng-model="fractionSize" ng-if="fractionSize"> — Stefano Saitta
– Stefano Saitta, Commented Jan 7, 2016 at 18:57
you should edit the title of the question btw, is not very clear what your are asking. — Stefano Saitta
– Stefano Saitta, Commented Jan 7, 2016 at 19:18

Stefano Saitta · Accepted Answer · 2016-01-07 19:15:18Z

1

You should redefine the filter you are using, cause by design angular would return NaN, as you can see here: Number filter should not format NaN to empty string

Here a custom filter that accomplish what are you looking for:

angular.module('plunker', [])
  .controller('MainCtrl', function($scope) {
    $scope.nomber = 0;
    $scope.fractionSize = 0;
  })
.filter('textOrNumber', function ($filter) {
    return function (input, fractionSize) {
        if (isNaN($filter('number')(input, fractionSize))) {
            return $filter('number')(input, 1);
        } else {
            return $filter('number')(input, fractionSize);
        };
    };
});

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="angular.js@1.*" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    Number: <input type="number" ng-model="nomber"><br/>
    fractionSize: <input type="number" ng-model="fractionSize"><br/>
    gives: {{ nomber | textOrNumber: fractionSize}}
  </body>

</html>

EDIT: An improvements can be, if we consider that and empty denominator in a fraction can be evaluated as 1, so you can edit your code returning $filter('number')(input, 1); when isNan() has evaluated true.

Here you can find a working plunkr.

edited Jan 7, 2016 at 19:15

answered Jan 7, 2016 at 19:09

Stefano Saitta

2,0721 gold badge22 silver badges36 bronze badges

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

2 Comments

Kévin Duguay Over a year ago

It's sure that it would work with a module, but I was more aiming for something quick and easy in the html file. Anyway, It's really not a big deal.

Stefano Saitta Over a year ago

i will not tell with 100% of certainty that there's no solution for doing this as you imagine into the html, but i'm not able to find another solution rather than this one i propose to you. I hope it will be fine :)

Moid · Accepted Answer · 2016-01-07 19:21:16Z

0

Use type="number"instead of text.

<input type="number" min="0" ng-model="fractionSize">

I think that should solve your problem for NaN. And as you say that it works for number, it should solve your problem.

And if you want to add a condition instead then:

Number: <input type="number" ng-model="nomber"><br/>
fractionSize: <input type="number" min="0" required ng-model="fractionSize"><br/>
    gives: <span ng-if="typeOf nomber ==='number'">{{ nomber | number:fractionSize }}</span>

Here is the working fiddle.

edited Jan 7, 2016 at 19:21

answered Jan 7, 2016 at 18:41

Moid

1,4471 gold badge13 silver badges25 bronze badges

5 Comments

Kévin Duguay Over a year ago

still gives me NaN when I empty the fractionSize field

Moid Over a year ago

What did you try...? I have edit the answer, try that. Actually your were using the nomber modal value and I applied the condition on fractionNumber

Kévin Duguay Over a year ago

I tried with your edited version and it doesn't work. Is there anyway to just do something like: {{ nombre | number if(my_condition){+":fractionSize"} }}

Moid Over a year ago

No, that wont work. And now, I got it working.. Just add required field to the second input. That will do the trick.

Kévin Duguay Over a year ago

It's still not what I'm hopping for, but thanks for your help, it's that important, I was really just currious to know if I could do {{ nombre | number if(my_condition){+":fractionSize"} }} like I asked previously, but you told that I can't, so I have my answer :)

Collectives™ on Stack Overflow

How to use condition in expression in AngularJS

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related