2014-09-17 2 views
0

Je viens de commencer à apprendre Angular JS et je souhaite créer une simple calculatrice. L'utilisateur doit d'abord entrer le nombre d'opérandes. Après cela, je veux afficher ces nombreux nombres de zones de texte pour entrer les opérandes. Ci-dessous le code html (ce n'est pas le code complet pour la calculatrice):Ajout dynamique d'entiers en tant qu'entrées utilisateur dans des zones de texte créées dynamiquement - Angular JS

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="myCalc"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Calculator</title> 
</head> 
<body ng-controller="FormController"> 
    <h3><em>Do your calculations here!!</em></h3> 
    <div>   
     <p>Enter number of operands : <input type="number" ng-model="paramCount" name="count" ng-change="getNumber(paramCount)"/></p> 
     <p ng-repeat="i in getNumber(paramCount)">Enter the operand : <input type="text" ng-model="numbers"/></p> 
     <p><button ng-click="reset()">Reset</button></p> 
    </div> 
</body> 
</html> 

et ci-dessous est le script:

<script src="angular.min.js"></script> 
<script> 
    var myCalcApp = angular.module('myCalc', []); 

    myCalcApp.controller('FormController', function ($scope) { 

     $scope.paramCount = 0; 
     $scope.getNumber = function (num) { 
      array = []; 
      for (i = 1; i <= num; i++) { 
       array.push(i) 
      } 
      return array; 
     } 
     $scope.reset = function() {     
      $scope.paramCount = 0; 
     }; 
    }); 
</script> 

Je suis coincé à lier l'entrée d'utilisateur à un modèle et utiliser pour calculer la somme.

Toute aide est très appréciée.

Merci.

Répondre

0

Une solution serait de:

1) Créer un tableau d'opérandes dans votre contrôleur.

Exemple: $ scope.operands = [];

2) Initialiser dans votre "$ scope.getNumber" fonction

3) Modifiez ce ng-modèle:

<input type="text" ng-model="numbers"/> 

par celui-ci:

<input type="text" ng-model="operands[$index]"/> 

J'espère que mon la réponse vous convient.

Quelques documents utiles: https://docs.angularjs.org/api/ng/directive/ngRepeat

Questions connexes