Как использовать условие в выражении в AngularJS

Я делаю небольшую страницу, которые показывают, как номер фильтра работы:Как использовать условие в выражении в AngularJS

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

Если я пишу номер, он будет работать, но если я решу имел nomber во фракцииSize, но, чем удалить его, он дает мне NaN.

Я хотел бы иметь состояние в

{{ nomber | number:fractionSize }}

, который скажет свое состояние, чтобы не пытаться использовать fractionSize если вход пуст.

источник

2016-01-07 Kévin Duguay

Вы могли бы предоставить plunkr или jsfiddle, которые отображают ошибку? –

Я не знаю, как их использовать, но я должен объяснить это. Это не сложная ошибка, и что действительно важно, так это то, что я мог бы удалить «: fractionSize» из моего выражения, если вход «fractionSize» пуст. –

Я думаю, что решение может быть просто добавлено –

Вы должны переопределить фильтр, который вы используете, причину по конструкции углового возвратит 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="[email protected]*" 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 может быть, если мы считаем, что и пустой знаменатель дроби может быть оценена как 1, так что вы можете редактировать у наш код возвращает $filter('number')(input, 1);, когда isNan() оценил значение true.

Here вы можете найти рабочий plunkr.

источник

2016-01-07 19:09:08

Уверен, что он будет работать с модулем, но я был больше нацеливаясь на что-то быстрое и легкое в html-файле. Во всяком случае, это действительно неважно. –

Я не буду сообщать со 100% уверенности, что нет решения для этого, как вы представляете в html, но я не могу найти другое решение, а не предлагать вам это. Надеюсь, все будет хорошо :) –

Использовать 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 является рабочей скрипкой.

источник

2016-01-07 18:41:54

все еще дает мне NaN, когда я освобождаю поле fractionSize –

Что вы пытались ...? Я отредактировал ответ, попробуйте это. Фактически, вы использовали модальное значение 'nomber', и я применил условие на' fractionNumber' –

. Я попытался с вашей отредактированной версией, и это не сработало. Есть ли вообще что-то вроде: {{nombre | number if (my_condition) {+ ": fractionSize"}}} –

Как использовать условие в выражении в AngularJS

ответ

Смежные вопросы