如何在 AngularJS 中的表达式中使用条件

Question

我正在制作一个小页面来展示数字过滤器的工作原理：

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

如果我写一个数字，它会起作用，但如果我决定在 fractionSize 中有一个数字，而不是删除它，它会给我 NaN。

我想在

有一个条件

{{ nomber | number:fractionSize }}

如果输入为空，这将告诉我的条件不要尝试使用 fractionSize。

Answer 1

使用type="number"代替text。

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

我认为这应该可以解决 NaN 的问题。正如你所说，它适用于数字，它应该可以解决你的问题。

如果您想添加一个条件，那么：

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 是有效的 fiddle.

Answer 2

您应该重新定义您正在使用的过滤器，因为设计 angular 会 return NaN，正如您在此处看到的：Number filter should not format NaN to empty string

这里是一个自定义过滤器，可以满足您的需求：

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>

编辑：改进可以是，如果我们考虑到分数中的空分母可以计算为 1，那么当 isNan() 计算为真时，您可以编辑代码 returning $filter('number')(input, 1);。

Here 你可以找到一个可以工作的 plunkr。

如何在 AngularJS 中的表达式中使用条件

How to use condition in expression in AngularJS

conditional

expression

angularjs