angularjs - 有角度的 FizzBuzz？

Question

我正在尝试学习 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/

提前谢谢！

score 2 · Accepted Answer

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

score 0 · Accepted Answer

你应该设置这个条件

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

放在首位并替换&.&&

这是工作JSFiddle。

score 0 · Accepted Answer

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

angularjs - 有角度的 FizzBu​​zz？

3 回答 3

Related

Reference

angularjs - 有角度的 FizzBuzz？