FizzBuzz in angular?

Question

I am trying to learn Angular and I am trying to make a fizzBuzz however; I don't get result with 'both' conditions:

Here is the app:

var myApp = angular.module("myApp", []);

myApp.controller("game", ["$scope", function($scope) {

$scope.number = 0;
$scope.result = "";

$scope.fizzBuzz = function(){

  if($scope.number){

      if($scope.number % 3 == 0)
      {
        return $scope.result = "Fizz";
      }
      else if($scope.number % 5 == 0)
      {
        return $scope.result = "Buzz";
      }
      else if(($scope.number % 3 == 0) && ($scope.number % 5 == 0))
      {
        return $scope.result = "FizzBuzz";
        alert($scope.result);
      }
  }else{
      return "Enter a Number";
  }

};

}]);

and binding:

<div ng-controller="game">

<input type="text" ng-model="number">

<h1>{{fizzBuzz(result)}}</h1>

</div>

It can't get 'FizzBuzz'but 'Fizz' and 'Buzz' ..

That works with plain js good. I just can't see if this is a sytax error..?

Live: http://jsfiddle.net/huguxvmx/1/

Thnx in advance!

The title suggests you already know the error in your code... — Novocaine, Oct 13 '14 at 08:27
Its condition problem. Add your condition in reverse order. It will solve your problem. Check in jsfiddle http://jsfiddle.net/huguxvmx/5/ — Rajesh Ujade, Oct 13 '14 at 08:34

score 2 · Answer 1 · answered Oct 13 '14 at 08:27

2

because else if work in this way, if one of you condition get succeeded, then next not get executed remove else and do it with only if or move the last check to top and use &&:

  if(($scope.number % 3 == 0) && ($scope.number % 5 == 0))
  {
    return $scope.result = "FizzBuzz";
    alert($scope.result);
  }
  if($scope.number % 3 == 0)
  {
    return $scope.result = "Fizz";
  }
  if($scope.number % 5 == 0)
  {
    return $scope.result = "Buzz";
  }

answered Oct 13 '14 at 08:27

Zaheer Ahmed

28,160
11
74
110

You are not checking if $scope.number is entered.. First if statement is: if a number is entered check if it can be divided 3...etc – Mar Oct 13 '14 at 08:32
@Mar thats upper check I have just written inner code of that condition. – Zaheer Ahmed Oct 13 '14 at 09:19

score 0 · Accepted Answer · answered Oct 13 '14 at 08:31

0

You should set up this condition

if(($scope.number % 3 == 0) && ($scope.number % 5 == 0))

on the first place and replace & on &&.

This is working JSFiddle.

answered Oct 13 '14 at 08:31

Artyom Pranovich

6,814
8
41
60

score 0 · Answer 3 · answered Sep 03 '15 at 20:16

Here is an alternative way to do FizzBuzz in Angular. Just thought I add my 2 cents in case anyone is looking to do this exercise another way.

Here is the HTML:

<!DOCTYPE html>
  <html>

  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script data-require="angular.js@1.3.10" data-semver="1.3.10" src="https://code.angularjs.org/1.3.10/angular.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <h1>FizzBuzz</h1>
    <div ng-controller="myCtrl">
      <div ng-repeat="number in numbers">
        {{ number }} 
        <span ng-if="number%3==0 && number%5!==0" >Fizz</span>
        <span ng-if="number%5==0 && number%3!==0">Buzz</span>
        <span ng-if="number%3==0 && number%5==0">FizzBuzz</span>
      </div>
    </div>
  </body>

</html>

And here is the script:

angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
    function range(start, stop, step){
      var a=[start], b=start;
      while(b<stop){b+=step;a.push(b)}
      return a;
    }
    $scope.numbers = range(1, 100, 1);
}]);

FizzBuzz in angular?

3 Answers3