Frage Rechnen in AngularJS

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Christian_01

Mitglied
9 Februar 2017
42
0
6
24
Hallo Leute,

ich möchte gern etwas rechnen in AngularJS und das in Variablen abspeichern und wieder verwenden. Nun weiß ich leider nicht wie das geht. Ich hab die Rechnung schon in AngularJS zu testzwecken eingebaut. Doch ist es sinnvoller wenn ich es das ganze einmal ausrechne und die Variablen dann wieder verwende, zu Gunsten der Performance.
Ich habe schon versucht im Controller eine Variable zu erstellen und dort zurechnen, doch leider geht das auch nicht.

Ich freue mich wenn ihr mir weiter helfen könnt.

Gruß Christian

Code:
<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="js/angular.min.js"></script>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <div>
        <br><input type="number" ng-model="Regenspende" placeholder="Regenspende"><br><br>
        <input type="number" ng-model="Rinnenstrang" placeholder="Rinnenstrang"><br><br>
        <input type="number" ng-model="Flaeche" placeholder="Flaeche" ><br><br>       
        <h1>{{Flaeche}}</h1>
        <h5>Einzugstiefe: {{Flaeche/Rinnenstrang |nachkomma}}</h5>
    </div>
    
    <div ng-repeat="x in systeme">
        
        <h2>{{x.name}}</h2>
        <p>Gesamt Speichervolumen: {{Rinnenstrang*x.Speichervolumen|round}}l</p>
        <p>Rinnenstranglaenge: {{((x.Abflussvermoegen*10000*Rinnenstrang)/(Regenspende*Flaeche))|rounddown}}m</p>
        <p>Anzahl der Ablaufkästen: {{(Rinnenstrang/((x.Abflussvermoegen*10000*Rinnenstrang)/(Regenspende*Flaeche))|roundup)}}</p>
            
    </div>
 <script>
  
 var app=angular.module('myApp',[]);
 app.controller('myCtrl', function($scope){
   $scope.systeme=[
    {name: 'MINI100', Abflussvermoegen: 2.2, Speichervolumen: 6.9},
    {name: 'TOP 100 & MAXI 100', Abflussvermoegen: 5.4, Speichervolumen: 10.4},
    {name: "TOP 150 & MAXI 150", Abflussvermoegen: 10.2, Speichervolumen: 22.3},
    {name: "TOP 200 & MAXI 200", Abflussvermoegen: 18.6, Speichervolumen: 36.7},
    {name:"MAXI 300", Abflussvermoegen: 49.2, Speichervolumen: 80.2},
    {name: "MAXI 400", Abflussvermoegen: 80.6, Speichervolumen: 124.2},
    {name: "HYDROblock 100", Abflussvermoegen: 3.1, Speichervolumen: 7.8},
    {name: "HYDROblock 150", Abflussvermoegen: 9.6, Speichervolumen: 17.6},
    {name:"HYDROblock 200", Abflussvermoegen: 17.7, Speichervolumen: 31.3},
    {name: "HYDROblock 300", Abflussvermoegen: 48.3, Speichervolumen: 70.6}
   ];
  
  });
  
  app.filter('roundup', function () {
         return function (value) {
    return Math.ceil(value);
   };
     });
  
  app.filter('rounddown', function () {
         return function (value) {
    return Math.floor(value);
   };
     });
  
  app.filter('round', function () {
         return function (value) {
    return Math.round(value);
   };
     });
  
  app.filter('nachkomma', function () {
         return function (value) {
    return value.toFixed(2);
   };
     });
  
  
 </script>
</body>
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.234
483
83
Berlin
Was soll da auch berechnet werden? Du verwendest im oberen Div ng-model für nichtexistente Variablen.

Nebenbei bemerkt schreibt man nach gängigen Code-Konventionen den ersten Buchstaben einer Variablen nicht groß.
 

Christian_01

Mitglied
9 Februar 2017
42
0
6
24
okay, ich habe jetzt Variablen erstellt und die alle Buchstaben kleingeschrieben.

Berechnungen sind jetzt zurzeit im <p>-tag...diese möchte ich raus haben und im JavaScript haben und die Berechnungen halt in einer Variable abspeichern.


Es handelt sich um diese Berechnungen:
Code:
<p>Gesamt Speichervolumen: {{rinnenstrang*x.speichervolumen|round}}l</p>
        <p>Rinnenstranglaenge: {{((x.abflussvermoegen*10000*rinnenstrang)/(regenspende*flaeche))|rounddown}}m</p>
        <p>Anzahl der Ablaufkästen: {{(rinnenstrang/((x.abflussvermoegen*10000*rinnenstrang)/(regenspende*flaeche))|roundup)}}</p>

und die Variablen dafür habe ich nun wie folgt deklariert:
Code:
    var regenspende;
    var rinnenstrang;
    var flaeche;
    var gesamtspeichervolumen;
    var rinnenstranglaenge;
    var ablaufkaesten;
 

Tronjer

Senior HTML'ler
8 Oktober 2010
5.234
483
83
Berlin
und die Variablen dafür habe ich nun wie folgt deklariert:

Das ist falsch. Variablen mit dem keyword var existieren nicht im Template. Ich helfe ja gerne mit Angular, aber das Einsteigertutorial musst du vorher schon durcharbeiten. Expressions und Berechnungen stehen da ganz am Anfang.

Als Tipp am Rande: Ich verwende AngularJS gerne für Demozwecke, setze es aber nicht mehr in der Praxis ein. Da die Materie für dich neu ist, solltest du lieber direkt mit dem neuen Angular einsteigen. Das ist schon wegen TypeScript leichter zu erlernen.