0

Estou iniciando a aprender com AngularJS. Em uma função simples, preciso fazer o fatorial de um número utilizando o AngularJS, mas não consigo retornar o resultado na tela (página HTML). Alguém poderia me ajudar?

<!DOCTYPE html>
<html ng-app="fatorialApp">

<head>
  <meta charset="UTF-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>

<body ng-controller="fatorialController">

  <div>
    <label>Número:</label>
    <input type="text" ng-model="numero" placeholder="Calcular o fatorial">
    <hr>
    <h1>{{ resultado }}</h1>
  </div>

  <script>
    var app = angular.module('fatorialApp', []);
    app.controller('fatorialController', function($scope) {
      $scope.resultado = function() {

        var resultadoDoFatorial = 1;
        for (var i = 1; i <= $scope.numero; i++) {
          resultadoDoFatorial = resultadoDoFatorial * i;
        }
        return resultadoDoFatorial;
      }
    });
  </script>
</body>

</html>

1 Resposta 1

1

Muito simples! Como você está referenciando em seu h1 diretamente uma função, basta colocar assim em seu html {{ resultado() }} pronto, ele irá funcionar.

Veja:

<input type="text" ng-model="numero" placeholder="Calcular o fatorial" />
<h1>{{ resultado() }}</h1>

MAS!

Tome cuidado ao utilizar esse tipo de aplicação pois a cada interação com essa função o Angular irá rodar um $digest, a grosso modo falando ele irá verificar toda a plicação por alteração em suas propriedades para verificar se é necessário atualizar ou não, fazendo com que sua aplicação possa ter um impacto na performance muito grande.

O que eu recomendo fazer?

  • Utilizar ng-blur, assim o valor só atualiza quando o usuário 'sair' do input. Opção menos dinâmica.

  • Utilizar ng-model-options, assim você tem controle de quando rodar a função. Por exemplo, se eu vou digitar o número 15.987, você só precisa exibir o resultado após eu terminar de digitar, então usamos a propriedade debounce para rodar a função x segundos após o usuário terminar de interagir com o input.

Veja os dois exemplos abaixo e decida qual se aplica melhor ao seu cenário.

Opção1:

<input type="text" ng-model="numero" placeholder="Calcular o fatorial" ng-blur="rodaResultado()">
<h1>{{ resultado }}</h1>


$scope.rodaResultado = function() {
    var resultadoDoFatorial = 1;
    for (var i = 1; i <= $scope.numero; i++) {
        resultadoDoFatorial = resultadoDoFatorial * i;
    }
    $scope.resultado = resultadoDoFatorial;
}

Exemplo: http://plnkr.co/edit/9vFoYSAHhdZIXdcjuIuF?p=preview


Opção 2:

Basta trocar seu input para:

<input type="text" ng-model="numero" placeholder="Calcular o fatorial" ng-model-options="{ debounce: 800}">

Exemplo: http://plnkr.co/edit/D8uAxr?p=preview

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .