有角度的 FizzBuzz？答案

【问题标题】：FizzBuzz in angular?有角度的 FizzBuzz？
【发布时间】：2014-10-13 08:23:36
【问题描述】：

我正在尝试学习 Angular，但是我正在尝试制作 fizzBuzz；我没有得到“两种”条件的结果：

这是应用程序：

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";
  }

};

}]);

和绑定：

<div ng-controller="game">

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

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

</div>

它不能得到 'FizzBuzz' 但 'Fizz' 和 'Buzz' ..

这适用于普通的 js。我只是看不出这是否是语法错误..？

直播：http://jsfiddle.net/huguxvmx/1/

提前谢谢！

【问题讨论】：

标题表明你已经知道代码中的错误...
它的条件问题。以相反的顺序添加您的条件。它会解决你的问题。签入 jsfiddle jsfiddle.net/huguxvmx/5

标签： angularjs fizzbuzz

【解决方案1】：

因为 else if 以这种方式工作，如果你们中的一个条件成功，则 next 不会执行 remove else 并仅使用 if 或将最后一个检查移至顶部并使用 &&：

  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";
  }

【讨论】：

你没有检查是否输入了$scope.number。首先if语句是：如果输入了一个数字，检查它是否可以被除3...等
@Mar 上面的检查我刚刚写了那个条件的内部代码。

【解决方案2】：

你应该设置这个条件

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

首先将& 替换为&&。

这是有效的JSFiddle。

【讨论】：

【解决方案3】：

这是在 Angular 中执行 FizzBuzz 的另一种方法。只是想我加上我的 2 美分，以防有人想以另一种方式做这个练习。

这里是 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>

这是脚本：

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);
}]);

【讨论】：