Wie kann ich String in einem Winkelausdruck auf Int analysieren?


75

Eine Zahlenfolge '5'

var num_str = '5';

Wie kann ich die unten aufgeführten Antworten gleichzeitig analysieren und korrigieren lassen?

{{num_str + 1}}  // 6
{{num_str - 1}}  // 4

parseInt kann nicht in einem Angular-Ausdruck verwendet werden.

{{parseInt(num_str) - 1}}    

Zahlenfilter kann nicht addieren und minus,

{{num_str - 1 | number}}

Wenn jemand nützliche Vorschläge hat, werde ich Sie sehr schätzen


2
Klingt so, als ob Sie einen benutzerdefinierten Filter wünschen. Sie können relativ einfach nur eine Funktion schreiben, die die Eingabe übernimmt und die Ausgabe zurückgibt.
Shaunhusain

Antworten:



78

Ich bevorzuge einen Winkelfilter.

app.filter('num', function() {
    return function(input) {
      return parseInt(input, 10);
    };
});

dann können Sie dies im dom verwenden:

{{'10'|num}}

Hier ist eine Geige .

Hoffe das hat geholfen!


2
Nützlich und auf AngularJs Art. Vielen Dank!
Javier Vazquez

1
sehr schöne Lösung!
Ken

Funktioniert nicht, wenn Sie +1 oder -1 als gestellte Frage verwenden möchten.
Jingshao Chen

58

Du kannst es versuchen:

{{ 1 * num_str + 1 }}

http://jsfiddle.net/Z32fP/


8
Bitte fügen Sie niemals solche kleinen Hacks zu einer echten Codebasis hinzu.
AlienWebguy

Dies funktioniert nicht, wenn die Zahl in Tausend angegeben ist und die Zeichenfolge ein Komma enthält. Dies könnte 1000 in eine Zahl verwandeln, aber nicht 1.000
discodane

Ich bin damit einverstanden, dass dies ein Hack ist, aber dies scheint die einzige funktionierende Lösung zu sein
Mohit Kanwar

23

Eine andere Option wäre:

$scope.parseInt = parseInt;

Dann könnten Sie dies tun, wie Sie wollten:

{{parseInt(num_str)-1}}

Dies liegt daran, dass Winkelausdrücke keinen Zugriff auf das haben window, sondern nur auf scope.

Mit dem Zahlenfilter funktioniert es auch, wenn Sie Ihren Ausdruck in Klammern setzen:

{{(num_str-1) | number}}

DEMO


1
Angular ist eingebaut | Zahlenfilter ist in den meisten Fällen der richtige Weg.
Brad Martin

15
{{ num_str - 0 }}

...funktioniert bei mir.


1
Geniale Lösung. Wenn num_str = '' Null string, funktioniert dies immer noch. Ich dachte, ich würde eine NaN bekommen, aber es funktioniert großartig!
Oliver

11

Keines der oben genannten hat bei mir funktioniert.

Aber das tat:

{{ (num1_str * 1) + (num2_str * 1) }}


2

Neben {{1 * num_str + 1}} können Sie auch Folgendes versuchen (minus zuerst):

{{ num_str - 0 + 1}}

Aber es ist sehr zerbrechlich, wenn num_str Buchstaben enthält, wird es fehlschlagen. Versuchen Sie also besser, einen Filter zu schreiben, wie @hassassin sagte, oder verarbeiten Sie die Daten direkt nach dem Initiieren vor.


1

Sie können ein Rohr erstellen und es in Ihrem System verwenden, wo immer Sie möchten.

import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({
     // tslint:disable-next-line:pipe-naming
     name: 'toNumber',
     pure: false }) export class ToNumberPipe implements PipeTransform { 
     public transform(items: any): any {
         if (!items) {
             return 0;
         }
         return parseInt(items, 10);
     } }

Im HTML

{{ attr.text | toNumber }}

Denken Sie daran, diese Pipe in Ihrer Moduldatei als vollständig zugänglich zu deklarieren.


0

Ich habe die oben genannten Lösungen ausprobiert und keine davon hat für mich funktioniert. Ich habe JSON.parse verwendet und es hat funktioniert:

$http.get('/api/getAdPolling')
  .success(function (data) {
    console.log('success: ' + data.length);

    if (JSON.stringify(data) != "not found") {
        $scope.adPoll = JSON.parse(data);
    }
})
  .error(function (data) {
    console.log('Error: ' + data);
});

0

Nicht wirklich toll, aber ein lustiger Hack: Du kannst - statt +

{{num_str -- 1 }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app>
  {{'1'--1}}
</div>

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.