CODEWITHSUNDEEP
javascriptangularjs
John
John

Reputation: 161

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?

Upvotes: 0

Views: 987

Answers (2)

devqon
devqon

Reputation: 13997

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

Upvotes: 2

Peter_Fretter
Peter_Fretter

Reputation: 1165

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.

Upvotes: 0

Related Questions