Creating an entry form using Angular

Question

I am in the process of learning AngularJS (version 1) and want to convert a simple word game that I had previously written.

I have a partial HTML which will select a word from a dictionary (JSON file) and display it on screen. The word is saved in $scope as selectedWord. I now want to display an array of empty textboxes for the user to input their guess. The number of boxes to display will obviously be determined by the length of selectedWord and will be different for each game played.

The relevant HTML I need to produce for each letterbox is:

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

with the id incremented by 1 for each new box.

Can you attach a plnkr?

Deepanjan
– Deepanjan

2016-06-26 09:10:47 +00:00
Commented Jun 26, 2016 at 9:10 — Deepanjan
– Deepanjan, Commented Jun 26, 2016 at 9:10

T J · Accepted Answer · 2016-06-26 09:42:13Z

2

When selectedWord changes, create an array containing as many objects as the length of selectedWord, something as simple as

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

Then in your template, use ng-repeat like:

<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">

But if you're using angular properly, I don't you'l need that id unless you want to associate it with a <label>.

answered Jun 26, 2016 at 9:42

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KevinMc Over a year ago

This appears to be the correct answer but for some reason the javascript function in ng-keyup does not seem to get called. I have added the line alert("Running testResults..."); to the start of this function so I am expecting it to at least do this. Is there something else I need to add to get ng-keyup to work ?

Fuzzzzel · Accepted Answer · 2016-06-26 09:47:49Z

1

ng-repeat

In ng-repeat you can repeat an element and the index is tracked by {{ $index }}. It is zero-based though so you most likely need to add 1.

Split string to array

What you could do is to create an array of characters from your string/word and do an ng-repeat with it.

Track items by $index

It is important that you track the items by $index, so angular js does not complain about dupes.

Here's the code I propose:

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

I am not sure if it can be done without the surrounding div but if you make it float: left it should not make a difference.

answered Jun 26, 2016 at 9:47

Fuzzzzel

1,7833 gold badges24 silver badges40 bronze badges

2 Comments

T J Over a year ago

Note that you can't properly use ng-model directive with this (hence my answer using an array of objects)... Plus the onevent thingies won't be recognized by angular. So you can't properly retrieve the user input in an angular way.

Fuzzzzel Over a year ago

True in a way - as you can test for the object and store the input with it, your way ist more advanced. I did not look at that part, because the question was on how to get the index within the id-attribute. Plus: without explanation, why you did what, I am not sure the original poster will see all your changes - and by this will not be able to use the benefits of your array-of-objects-approach.

Collectives™ on Stack Overflow

Creating an entry form using Angular

2 Answers 2

1 Comment

ng-repeat

Split string to array

Track items by $index

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

ng-repeat

Split string to array

Track items by $index

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related