Use expressions to build variable names in Angular.js

When working with HTML and JavaScript you sometimes have to do weird things to achieve a specific purpose. In my case one of these things was building a variable name with Angular expressions.

While generating a form via ng-repeat, I also had to generate the name of the input element. For verification, I wanted to add a CSS class to the input whenever it gets marked as invalid. To access it, I had to use the form.element pattern wherefore I wrote something like this, trying to generate the variable name with an expression.

Wrong:

The code above does not only cause errors, it also is invalid HTML so I had to find another way. The solution is replacing the double curly braces with simple square brackets so that the final code looked like this:

Correct:

This works perfectly and is also valid HTML code. I hope that helps and spares your nerves. If you are looking for another working example, you can take a look at this JSFiddle repository, where I created a tiny demo project to play around with.

Leave a Reply

Your email address will not be published. Required fields are marked *