2016-07-02 2 views
1

Я не уверен, пытаюсь ли я сделать это лучше всего (правильно?), Но у меня есть игра слов на странице AngularJS, где игроки пытаются угадать слово. Каждая буква представлена ​​текстовым полем, и когда игрок вводит свое предположение, письмо передается функции, которая проверяет правильность буквы и соответственно меняет цвет поля.

До сих пор у меня есть следующий код в моем частичном файле:

<p>Answer: {{selectedWord}}</p> 

<div> 
<input type="text" name="letters[]" class="answerbox" ng-repeat="guess in guesses" id="{{'letter_'+$index}}" ng-model="guess.value" onkeyup="testResults(this)" ng-focus="this.select();" size="1" maxlength="1"> 
</div> 

Это будет принимать входной сигнал и передать его в мою функцию, которая выглядит следующим образом:

function testResults(letter) { 
    var box_id = letter.id; 

    var boxparts = box_id.split("_"); 
    var box_number = boxparts[1]; 

    var correct_answer = selectedWord(box_number-1, 1); 
    var your_answer = letter.value; 
    your_answer = your_answer.toLowerCase(); 

    if (your_answer == correct_answer) { 
     letter.style.backgroundColor = "#32e53e"; 
    } else {letter.style.backgroundColor = "#ff6d6e"; } 
       var is_correct = check_all(); 
    } 

Что я не могу для этого нужно передать значение правильного ответа ($scope.selectedWord), чтобы я мог использовать его как var correct_answer в моей функции.

Я пробовал просто передать его с помощью onkeyup="testResults(this, $scope.selectedWord)" и различными вариантами, но это не работает.

Я был бы очень благодарен за некоторые указания относительно того, как передать это значение в функцию или если AngularJS предлагает лучший способ достичь моей цели.

+0

попытки нг-KeyUp вместо OnKeyUp = "TestResults (это)" – Ved

ответ

1

Некоторые быстрые подсказки:

  • Всегда используйте угловые директивы (ng-keyup) вместо родного языка JavaScript (onkeyup), чтобы сделать вашу жить проще.
  • Вы можете использовать ng-repeat для «итерации» строки на шаблоне.
  • Установите ваш ng-model в массив, так что вам не нужно возиться с идентификаторами и т. Д. Если вы хотите выделить входы зеленым или красным цветом, просто используйте ng-class.

я сделал немного скрипки для вас в качестве примера: http://jsfiddle.net/ManuKaracho/fwp41qd2/

+0

Это работает но не могли бы вы рассказать мне, как я могу использовать это, если мой HTML-файл является частичным? Мой контроллер называется Gamecontrol, но если я просто изменил строку div на ng-controller = «Gamecontrol as vm», я получаю неопределенную функцию. Если я оставлю это, я не получу ошибку, но текстовые поля не отображаются. – KevinMc

0

углового путь KeyUp ng-keyup="testResults(guess.value)"

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