Peter Peter - 2 months ago 13
AngularJS Question

Angular curly braces not working, basic code

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
</script>
</head>
<body style="padding: 20px 20pc;">
<div ng-app="app">
<div ng-repeat="item in 'somewords'.split('')">
{{$index + 1}}. {{item}}
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>


Hi everyone, I've tried to look up for some old post already but found nothing that could really help me.
I'm learning Angular and in a Tutorial they use this code that is supposed to count and split the letters in the word given.
The problem I'm having is that I get the curly braces as if they where some text in HTML. What am I doing wrong?

Answer

You have problems with the duplicates. You should use track by to solve the issue.

<div ng-repeat="item in 'somewords'.split('') track by $index">
        {{$index + 1}}. {{item}}
</div>

Here is a codepen. Also here is some documentation.

Comments