Angular JS Array Parsing

Итак, я нахожусь на начальных этапах создания интерактивной игры с Angular JS. Последние два дня я был в тупике, о том, как я собираюсь только регистрировать неправильные догадки на экране (вместо того, чтобы регистрировать каждое угадывание, введенное). Моя цель состоит в том, чтобы в конечном счете получить максимальное количество ошибок, равное 10, тогда пользователь проигрывает. Я просто в шоке от того, как я это сделаю. Новый для Angular, но не может понять это в простом JS. Любая помощь или подсказки будут высоко оценены.Angular JS Array Parsing

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. Здесь вы можете подтолкнуть неправильные догадки массиву wrongGuesses. Это в основном все, что нужно сделать на контроллере. В шаблоне 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>

Update: Я забыл упомянуть, что вы должны в конечном итоге создать функцию для кнопки сброса, который должен сбросить объект по userGuesses, массив wrongGuesses и сбросить ответ или принести новый ответ. В настоящее время сбрасывается только массив wrongGuesses.

источник

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 Array Parsing

ответ

Смежные вопросы