使用Angular创建条目表单

Question

我正在学习AngularJS（版本1）并希望转换我之前编写的简单文字游戏。

我有一个部分HTML，它将从字典（JSON文件）中选择一个单词并在屏幕上显示。该单词作为selectedWord保存在$ scope中。我现在想要显示一个空文本框数组供用户输入他们的猜测。显示的方框数显然取决于所选游戏的长度，并且每个游戏的游戏都会有所不同。

我需要为每个信箱制作相关的HTML：

<input name="letters[]" class="answerbox" id="letter_1" onkeyup="testResults(this)" onfocus="this.select();" type="text" size="1" maxlength="1">

每个新框的id增加1。

Answer 1

当selectedWord更改时，创建一个包含与selectedWord长度一样多的对象的数组，就像

一样简单

$scope.guesses =[];
for(var i=0;i<$scope.selectedWord.length;i++){
    $scope.guesses.push({
      value:''
    });
}

然后在您的模板中，使用ng-repeat，如：

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

但如果您正确使用角度，我不需要id，除非您想将其与<label>相关联。

Answer 2

纳克重复

在ng-repeat中，您可以重复一个元素，并由{{ $index }}跟踪索引。它基于零，但你很可能需要添加1。

将字符串拆分为数组

你可以做的是从你的字符串/单词创建一个字符数组，并用它做一个ng-repeat。

按$ index跟踪项目

通过$ index跟踪项目非常重要，因此有角度的js不会抱怨欺骗。

这是我建议的代码：

<div style="float:left" ng-repeat="chars in selectedWord.split('') track by $index">
    <input name="letters[]" class="answerbox" id="letter_{{$index + 1}}" onkeyup="testResults(this)" onfocus="this.select();" type="text" size="1" maxlength="1" >
</div>

我不确定是否可以在没有周围div的情况下完成，但如果你做到float: left它就不会有所作为。