Question

我正在尝试编写一个游戏，用户输入隐藏单词的每个字母，并显示一条消息，说明猜测是否正确。可以在http://www.kamac.co.uk/wordplay3/#/gamecontrol查看当前页面。

这显示了游戏应该如何工作，但Selected Word和VM Top Secret的值应该是相同的值。它们不同的原因是因为在我的代码中我不得不使用2个不同的控制器来使一切工作。

部分HTML如下：

<section class="spellbound container-fluid">
<div class="jumbotron">
<h1>SpellBound</h2>
<p>Below you will see a definition of one of the words in the dictionary. Enter a correct letter and the square turns green - enter a wrong letter and it turns red.</p>

<div class="panel panel-info">
<div class="panel-heading">How do you spell the word that means</div>
<div class="panel-body">{{selectedDefinition}}</div>    
<p>Selected Word: {{selectedWord}}</p>
</div>

<div ng-controller="GamecontrolController as vm">
<p>VM Top Secret: *{{vm.topsecret}}*</p>
<input type="text" width="1" ng-model="vm.letter[$index]" ng-repeat="letter in vm.topsecret track by $index" ng-change="vm.checkLetter($index)"/>
<p><span>{{vm.result}}</span></p>
</div>

<div>
<a ng-click="reloadPage()"  class="btn btn-info btn-lg" role="button">Play Again</a>
<a href="#/home" class="btn btn-info btn-lg" role="button">Back To Menu</a>
</div>

</section>

控制器代码如下：

wordplayControllers.controller('SpellboundController', function ($scope, $http){
var vm = this;

$http.get('data/data.json').success(function(data) {
    $scope.entries = data;
    var rand = Math.floor(Math.random()*$scope.entries.length);

    $scope.selectedWord = $scope.entries[rand].word;
    $scope.selectedDefinition = $scope.entries[rand].definition;

    vm.topsecret = $scope.selectedWord;
    vm.letter = [];

    vm.checkLetter = function(index){
        if(vm.topsecret[index] === vm.letter[index]){
            vm.result = "letter was correct"
        } else {
            vm.letter[index] = "";
            vm.result = "nope";
            }
        }   
    });     

});

不知怎的，我需要有我的单词词典，选择一个单词，显示必要数量的输入框，最后在单个控制器中检查输入到框中的输入。我一直在努力解决这个问题，而且这个论坛以前的帮助让我能够做到这一点，但是我对AngularJS如何工作的解释显然有些不对劲。我真的很感激最终解决这个特定问题的一些帮助（并理解解决方案）。

Answer 1

这样做有什么意义？

 vm.topsecret = $scope.selectedWord;

你可以简单地摆脱

<div ng-controller="GamecontrolController as vm">

并将所有内容附加到$ scope，它应该可以正常工作。

如何检查关键字的每个字母输入

1 个答案: