AngularJS: Error while interpolating: {{ $index + 1 }} - angularjs

I used $index inside simple ng-repeat to show items' number:
<li ng-repeat="item in dataList | limitTo:5">
<span>{{ $index + 1 }} </span>
</li>
And it worked OK for long time.
But sudden couple days ago I started getting:
Error: Error while interpolating: {{ $index + 1 }} illegal access
at Error (native)
at Object.k (/vendors/angular/angular.min.js:55:287)
at Object.e.$digest (/vendors/angular/angular.min.js:90:233)
at Object.e.$apply (/vendors/angular/angular.min.js:92:431)
at Object.<anonymous> (/js/controllers/HomePage.js:99:28)
at l (/vendors/jquery/jquery.min.js:4:24797)
at Object.c.fireWith [as resolveWith] (/vendors/jquery/jquery.min.js:4:25618)
at k (/vendors/jquery/jquery.min.js:6:5201)
at XMLHttpRequest.<anonymous> (/vendors/jquery/jquery.min.js:6:9005)
at both production and local environments.
Data in dataList is correct and the same as was all time previous.
It is reproducible only in latest Chrome (32.0.1700.14) in other browsers it still working correct.
Any ideas why this can happen and how it can be fixed?
Angular version: 1.1.5.

Debugging showed that exception is thrown from angular.js:6371 on native adding operation, and it is not about AngularJS itself.
For those who are getting same issue, looks like the only solution is to find any alternative way of implementing your task on which it is failing. At least till next Google Chrome update.
Thanks to #Heikki for pointing to chromium issues tracker.

Since the bug is related to String + Number concatenation I am using toString() on the numbers as a temp workaround.
{{($index + 1).toString()}}
worked in my case.

Related

Replace .Page.UniqueID in hugo to resolve deprecation warning

I'm using the blogdown theme:
https://github.com/shawnohare/hugo-tufte
I've fixed most of the build warnings I get, but I'm having trouble resolving this one:
Page.UniqueID is deprecated and will be removed in a future release. Use .File.UniqueID
I've tracked down the instance of Page.UniqueID to a couple of files which are used to create margin notes via a shortcode.
{{ $marginnoteDomIdSuffix := .Ordinal }}<label for="marginnote-{{ .Page.UniqueID}}-{{ $marginnoteDomIdSuffix }}" class="margin-toggle">⊕</label>
<input type="checkbox" id="marginnote-{{ .Page.UniqueID}}-{{ $marginnoteDomIdSuffix }}" class="margin-toggle"/>
<span class="marginnote">{{ .Inner }}</span>
I've tried a number of replacements of the .File.UniqueID type (.File.UniqueID, .UniqueID, ..File.UniqueId, you get the idea) as suggested in the warning, but have not had much success.

Syntax error on data-target in ReactJS

I am completely new to ReactJS and I 'm working on existing app, there I found some error in the line
<span data-toggle="modal" data-target="'#'+{providers.TICKET_NUMBER}">
{providers.TICKET_NUMBER} </span>
The error displaying is "jquery-1.10.2.min.js:21 Uncaught Error: Syntax error, unrecognized expression: '#'+{providers.TICKET_NUMBER}
Kindly please help,if possible. Excuse mistakes,If any.
You need to put the expression in a pair of {}
data-target={"#" + providers.TICKET_NUMBER}>

Error: [ngRepeat:iexp] Expected expression in form of '_item_ in _collection_[ track by _id_]' but got '\"movie'

I'm trying to test my Rails/Angular app in production Rails server and I'm getting an error in my console I don't know how to fix.
The error is,
Error: [ngRepeat:iexp] Expected expression in form of '_item_ in _collection_[ track by _id_]' but got '\"movie'.
The line of code,
%li.animate-repeat.search_results{"ng-if" => " movie.poster_path && movie.release_date", "ng-repeat" => "movie in movieList | orderBy:'-release_date'"}
The error is resolved when I remove the | orderBy:'-release_date' but obviously that's a filter I need.
Is there a good reason why this error is occuring?
You should check very well , all ng-repeats , specially if you have more than one ng-repeat within your page, I had the same error until I scan through my code carefulyl and found the issue
I read this from Here

Syntax error in order() method using ng-click and ng-repeat

I am using the following html code to create an ng-repeat:
<td ng-repeat="parentCategory in totalParentCategoriesCount | orderBy :'-Count'">
<h3>
Kategori
<span class="sortorder" ng-show="predicate === 'CategoryParent{{parentCategory.Count}}'" ng-class="{reverse:reverse}"></span>
</h3>
</td>
I wish to add the text CategoryParent with the number from parentCategory.Count to create a dynamic link.
When inspecting the link in the browser I get the corret outcome which is CategoryParent0, CategoryParent1, CategoryParent2 and so on. But when clicking the link I get the following error:
Error: [$parse:syntax] http://errors.angularjs.org/1.2.16/$parse/syntax?p0=%7B&p1=is%20an%20unexpe…Parent%7B%7BparentCategory.Count%7D%7D&p4=%7B%7BparentCategory.Count%7D%7D
at Error (native)
at http://localhost:51976/Scripts/angular.min.js:6:450
at $a.throwError (http://localhost:51976/Scripts/angular.min.js:165:141)
at $a.parse (http://localhost:51976/Scripts/angular.min.js:164:6)
at $get (http://localhost:51976/Scripts/angular.min.js:96:122)
at http://localhost:51976/Scripts/angular.min.js:129:290
at http://localhost:51976/Scripts/angular.min.js:10:248
at Array.forEach (native)
at q (http://localhost:51976/Scripts/angular.min.js:7:280)
at Uc (http://localhost:51976/Scripts/angular.min.js:10:219)
On the angular page its says the following:
Syntax Error: Token '{' is an unexpected token at column 15 of the expression [CategoryParent{{parentCategory.Count}}] starting at [{{parentCategory.Count}}].
I have been looking at this answer AngularJS expression throwing a Syntax error in ng-click and therefore tried many different compinations in the order() method but I cant figure out how to make the link dynamic without using brackets.
Right now the parentCategory.Count is an int but I have also tried to parse it to a string but without any success.
ng-click already takes an Angular expression - so no need for the {{}}
ng-click="order('CategoryParent' + parentCategory.Count)"

angularjs + yeoman + ng-switch + build:minify -> assertion

I am using an ng-switch in angularjs to have dynamic content in my page, dependent on the url. And I am managing my project with yeoman. Here is the code of the dynamic content generation:
html:
<div class="div-content bgcontent" id="content">
<span ng-switch on="renderPath[0]">
<div ng-switch-when="home" ng-include="'partials/home.html'"></div>
<div ng-switch-when="gallery" ng-include="'partials/gallery.html'"></div>
</span>
</div>
controller:
$scope.renderPath = $location.path().split('/');
// remove first entry because it's empty string
$scope.renderPath.shift();
This works perfectly well when running the stuff with 'yeoman server'. But if I build with 'yeoman build:minify', it doesn't work anymore afterwards. It hits an assertion:
at assertArg (http://host:8888/scripts/vendor/d10639ae.angular.js:973:11)
at Object.ngDirective.compile (http://host:8888/scripts/vendor/d10639ae.angular.js:13474:5)
at applyDirectivesToNode (http://host:8888/scripts/vendor/d10639ae.angular.js:4047:32)
at compileNodes (http://host:8888/scripts/vendor/d10639ae.angular.js:3794:14)
at compileNodes (http://host:8888/scripts/vendor/d10639ae.angular.js:3799:14)
at compile (http://host:8888/scripts/vendor/d10639ae.angular.js:3739:29)
at update (http://host:8888/scripts/vendor/d10639ae.angular.js:13685:22)
at $get.Scope.$broadcast.next (http://host:8888/scripts/vendor/d10639ae.angular.js:8002:24)
at Array.forEach (native)
at forEach (http://host:8888/scripts/vendor/d10639ae.angular.js:110:11) <!-- ngSwitchWhen: home -->
Does someone know how to fix this? Or where I need to look to debug it?
If you are using dependency-injection within your scripts, make sure to use the minify-proof syntax as described here: http://docs.angularjs.org/guide/di

Resources