Angular curly braces not working, basic code

Question

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

Have you got any console errors?

devqon
– devqon

2016-09-26 08:37:49 +00:00
Commented Sep 26, 2016 at 8:37 — devqon
– devqon, Commented Sep 26, 2016 at 8:37
Do you have a js file? You still need to initiate the app.

TheFullResolution
– TheFullResolution

2016-09-26 08:38:22 +00:00
Commented Sep 26, 2016 at 8:38 — TheFullResolution
– TheFullResolution, Commented Sep 26, 2016 at 8:38

devqon · Accepted Answer · 2016-09-26 08:49:37Z

2

I see a ng-app="app", but I don't see any code that initializes a module (with the name 'app'). Because you don't use any data that is initialized in any code, you can just rewrite it as <div ng-app>.

The other possibility is to define the module (which you'll probably need anyway if you dive deeper in the tutorials):

angular.module("app", []);

EDIT

As @Peter_Fretter correctly mentioned, it will still not work, because you have duplicates in the ng-repeat. You can fix that with using the track by $index:

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

See this jsfiddle

edited Sep 26, 2016 at 8:49

answered Sep 26, 2016 at 8:39

devqon

14k2 gold badges32 silver badges46 bronze badges

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

1 Comment

Peter_Fretter Over a year ago

It's possible he didn't post the JS file. Even with that declaration of the module, the code would not work. Check out my answer for the problem.

Peter_Fretter · Accepted Answer · 2016-09-26 08:40:50Z

0

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.

answered Sep 26, 2016 at 8:40

Peter_Fretter

1,15012 silver badges20 bronze badges

Collectives™ on Stack Overflow

Angular curly braces not working, basic code

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related