Angular JS陣列解析

所以我正處於與Angular JS交互遊戲的開始階段。過去兩天，我一直在爲如何去屏幕上輸入錯誤猜測而不是記錄輸入的每個猜測而困惑不已。我的目標是最終有一個最大錯誤的猜測量爲10，然後用戶輸了。我只是不知道該怎麼做。 Angular是新手，但無法用普通的JS來搞清楚。任何幫助或暗示將不勝感激。Angular JS陣列解析

app.controller('MainController', ['$scope', function($scope) { 
 
    var answerArray = ["linux","macintosh","windows"]; 
 
    var answer = answerArray[Math.floor(Math.random() * answerArray.length)]; 
 
    $scope.answer = answer; 
 
    $scope.userGuesses = []; 
 
    $scope.wrongGuesses = []; 
 
    $scope.guessTracker = 0; 
 

 
    $scope.guessCheck = function(){ 
 
    if($scope.userGuesses.indexOf($scope.guess) === -1){ 
 
     $scope.userGuesses.push($scope.guess); 
 
    } 
 
    $scope.guess = ""; 
 
    }; 
 

 
    $scope.letterDisplay = function(){ 
 
    var chars = $scope.answer.split(""); 
 

 
    _.each(chars, function(val, index){ 
 
     if($scope.userGuesses.indexOf(val) === -1){ 
 
     chars[index] = "_"; 
 
     } 
 
    }); 
 
    return chars; 
 
    }; 
 
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 

 
<body ng-app="hangMan"> 
 

 
    <div class="container" ng-controller="MainController"> 
 
     <div class="row text-center"> 
 
      <h1>Save Bernie</h1> 
 
     </div> 
 

 
     <div class="row text-center"> 
 
     <div class="col-md-12"> 
 
      <div id="messageDisplay"> 
 
      <span ng-repeat="char in letterDisplay() track by $index"> 
 
       {{char}} 
 
      </span> 
 
     </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Drawing --> 
 
     <div id="mainContent" class="row rowspacing"> 
 
     <div class="col-md-6"> 
 
      <div id="drawingWrapper"> 
 
      <div id="pole"></div> 
 
      <div id="poleExtension"></div> 
 
      <div id="rope"></div> 
 
      <div id="torso"></div> 
 
      <div id="head"></div> 
 
      <div id="leftArm"></div> 
 
      <div id="rightArm"></div> 
 
      <div id="leftLeg"></div> 
 
      <div id="rightLeg"></div> 
 
      <div id="hillary"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Controls --> 
 
     <div class="col-md-6 text-center"> 
 
      <div id="userSubmit"> 
 
      <form ng-submit="guessCheck()"> 
 
       <input type="text" name="guess" ng-model="guess" required><button>Guess</button> 
 
      </form> 
 
      <div id="guessDisplay" ng-repeat="character in userGuesses track by $index"> 
 
       {{character}} 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src='/js/bootstrap.min.js'></script> 
 
    <script>var app = angular.module("hangMan", []);</script> 
 
    <script src='/js/MainController.js'></script>

來源

2016-07-28 Daniel Zuzevich

首先，讓我們來談談作出更改當前的代碼。您可以提高性能，並通過使用JS對象而不是數組來搜索唯一的用戶猜測。你並沒有檢查guessCheck函數中的猜測是否正確。這是你可以將錯誤的猜測推向錯誤的猜測數組的地方。這主要是所有需要在控制器上完成的事情。在HTML模板中，您可以使用各種ng指令（如ng-show，ng-click等）根據遊戲狀態提供各種演示更新。

app.controller('MainController', ['$scope', function($scope) { 
 
    var answerArray = ["linux","macintosh","windows"]; 
 
    var answer = answerArray[Math.floor(Math.random() * answerArray.length)]; 
 
    $scope.answer = answer; 
 
    $scope.userGuesses = {}; 
 
    $scope.wrongGuesses = []; 
 

 
    $scope.guessCheck = function() { 
 
    if(!$scope.userGuesses.hasOwnProperty($scope.guess)){ 
 
     var isCorrectGuess = ~$scope.answer.indexOf($scope.guess); 
 
     if (!isCorrectGuess) 
 
     $scope.wrongGuesses.push($scope.guess); 
 
     $scope.userGuesses[$scope.guess] = "true"; 
 
    } 
 
    $scope.guess = ""; 
 
    }; 
 

 
    $scope.letterDisplay = function(){ 
 
    var chars = $scope.answer.split(""); 
 

 
    _.each(chars, function(val, index){ 
 
     if(!$scope.userGuesses.hasOwnProperty(val)){ 
 
     chars[index] = "_"; 
 
     } 
 
    }); 
 
    return chars; 
 
    }; 
 
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 

 
<body ng-app="hangMan"> 
 

 
    <div class="container" ng-controller="MainController"> 
 
     <div class="row text-center"> 
 
      <h1>Save Bernie <span ng-show="wrongGuesses.length===10">(Game OVER!)</span></h1> 
 
     </div> 
 

 
     <div class="row text-center"> 
 
     <div class="col-md-12"> 
 
      <div id="messageDisplay"> 
 
      <span ng-repeat="char in letterDisplay() track by $index"> 
 
       {{char}} 
 
      </span> 
 
     </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Drawing --> 
 
     <div id="mainContent" class="row rowspacing"> 
 
     <div class="col-md-6"> 
 
      <div id="drawingWrapper"> 
 
      <div id="pole"></div> 
 
      <div id="poleExtension"></div> 
 
      <div id="rope"></div> 
 
      <div id="torso"></div> 
 
      <div id="head"></div> 
 
      <div id="leftArm"></div> 
 
      <div id="rightArm"></div> 
 
      <div id="leftLeg"></div> 
 
      <div id="rightLeg"></div> 
 
      <div id="hillary"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Controls --> 
 
     <div class="col-md-6 text-center"> 
 
      <div id="userSubmit"> 
 
      <form ng-submit="guessCheck()"> 
 
       <input type="text" name="guess" ng-model="guess" required maxlength="1"><button ng-show="wrongGuesses.length < 10">Guess</button><button ng-show="wrongGuesses.length===10" ng-click="wrongGuesses = []">Reset</button> Wrong Guesses: {{wrongGuesses.length}} 
 
      </form> 
 
      <div id="guessDisplay" ng-repeat="(character,value) in userGuesses track by $index"> 
 
       {{character}} 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src='/js/bootstrap.min.js'></script> 
 
    <script>var app = angular.module("hangMan", []);</script> 
 
    <script src='/js/MainController.js'></script>

更新：我忘了提，你應該最終創造復位按鈕應該重置userGuesses對象，wrongGuesses陣列功能，並重置回答或取得一個新的回答。目前只有錯誤的Guesses數組正在重置。

來源

2016-07-28 18:55:16 10100111001

沒問題，非常感謝答覆。 –

理想情況下，我不想使用underscore.js關於我可以實現什麼而不是_.each函數的任何快速建議？ –

在評論解釋。我也將輸入文本框的最大長度設置爲1.替換大多數條件來強調函數，因爲您也只是使用它，爲什麼不用於所有？

app.controller('MainController', ['$scope', function($scope) { 
 
    var answerArray = ["linux","macintosh","windows"]; 
 
    var answer = answerArray[Math.floor(Math.random() * answerArray.length)]; 
 

 
    $scope.answer = answer; 
 
    $scope.userGuesses = []; 
 
    $scope.wrongGuesses = []; 
 
    $scope.guessTracker = 0; //unused 
 

 
    $scope.guessCheck = function(){ 
 
    // if $scope.guess still doesn't exists on $scope.userGuesses, push it 
 
    if(!_.contains($scope.userGuesses, $scope.guess)){ 
 
     // convert $scope.answer into array 
 
     var chars = $scope.answer.split(""); 
 

 
     $scope.userGuesses.push($scope.guess); 
 

 
     // if $scope.guess is not found on chars array, add it to wrongGuesses 
 
     if(!_.contains(chars, $scope.guess)) { 
 
     $scope.wrongGuesses.push($scope.guess); 
 
     } 
 

 
     // pop-up alert if wrong guesses reaches 10 or more 
 
     if(_.size($scope.wrongGuesses) >= 10) { 
 
     alert("gameover"); 
 
     } 
 
    } 
 
    $scope.guess = ""; 
 
    }; 
 

 
    $scope.letterDisplay = function(){ 
 
    var chars = $scope.answer.split(""); 
 

 
    _.each(chars, function(val, index){ 
 
     // used _.contains instead of .indexOf because why not? 
 
     if(!_.contains($scope.userGuesses, val)){ 
 
     chars[index] = "_"; 
 
     } 
 
    }); 
 
    return chars; 
 
    }; 
 

 
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 

 
<body ng-app="hangMan"> 
 

 
    <div class="container" ng-controller="MainController"> 
 
     <div class="row text-center"> 
 
      <h1>Save Bernie</h1> 
 
     </div> 
 

 
     <div class="row text-center"> 
 
     <div class="col-md-12"> 
 
      <div id="messageDisplay"> 
 
      <span ng-repeat="char in letterDisplay() track by $index"> 
 
       {{char}} 
 
      </span> 
 
     </div> 
 
     </div> 
 
     </div> 
 

 
     <!-- Drawing --> 
 
     <div id="mainContent" class="row rowspacing"> 
 
     <div class="col-md-6"> 
 
      <div id="drawingWrapper"> 
 
      <div id="pole"></div> 
 
      <div id="poleExtension"></div> 
 
      <div id="rope"></div> 
 
      <div id="torso"></div> 
 
      <div id="head"></div> 
 
      <div id="leftArm"></div> 
 
      <div id="rightArm"></div> 
 
      <div id="leftLeg"></div> 
 
      <div id="rightLeg"></div> 
 
      <div id="hillary"></div> 
 
      </div> 
 
     </div> 
 
     <!-- Controls --> 
 
     <div class="col-md-6 text-center"> 
 
      <div id="userSubmit"> 
 
      <form ng-submit="guessCheck()"> 
 
       <input type="text" name="guess" ng-model="guess" maxlength="1" required><button>Guess</button> 
 
      </form> 
 
      <div id="guessDisplay" ng-repeat="character in wrongGuesses track by $index"> 
 
       {{character}} 
 
      </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src='/js/bootstrap.min.js'></script> 
 
    <script>var app = angular.module("hangMan", []);</script> 
 
    <script src='/js/MainController.js'></script>

來源

2016-07-28 18:30:49 doge1ord

非常感謝您的代碼。非常感激！ –

Angular JS陣列解析

回答

相關問題