Develop Reference

Syntax Error: Token '{' Invalid Key - Errors even when displaying correctly

I'm struggling here (I am new to programming still), I have an ng-repeat that is repeating a list (page on Pages) which displays the correct number on the front end (i.e. 1) but, when I try and use the same for the ng-click, it will throw this error:
Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 31 of the expression [getCtrlScope().currentPage = {{ page }}] starting at [{ page }}].
What is strange is that it will display it correctly within the HTML code correctly but will not function.
Code:
<li class="page-item" ng-repeat="page in Pages">
<a class="page-link" ng-click="getCtrlScope().currentPage = {{ page }}">{{ page }}</a>
</li>
What shows when rendered in HTML:
<li class="page-item ng-scope" ng-repeat="page in Pages">
<a class="page-link waves-effect ng-binding" ng-click="getCtrlScope().currentPage = 2">2</a>
</li>
JS
var MyApp = angular.module('MyApp', []);
MyApp.controller('MyCtrl', function ($scope, $filter) {
$scope.Users = tJSONData;
$scope.currentPage = 0;
$scope.pageSize = 3;
$scope.search = '';
$scope.Pages = [1, 2, 3];
$scope.getData = function () {
return $filter('filter')($scope.Users, $scope.search)
}
$scope.updatePage = function() {
$scope.$apply(function () {
$scope.Users = tJSONData
})
}
$scope.numberOfPages = function () {
return Math.ceil($scope.getData().length / $scope.pageSize);
}
$scope.getCtrlScope = function () {
return $scope;
}
});
MyApp.filter('startFrom', function () {
return function (input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
I've looked around but pretty much all the fixes have been by removing {{ }}, some it has worked for because it was rendering incorrectly but it seems mine is rendering correctly.
If anyone has any ideas, it'd be a great help :)

You can access scope variables directly from view so you don't need getCtrlScope() function. Also all variables inside angular directives are scopes so you don't need brackets {{}}
Try this
<li class="page-item" ng-repeat="page in Pages">
<a class="page-link" ng-click="currentPage = page">{{ page }}</a>
</li>

Angular js + ng-repeat + alphanumeric index not working

I have created one Nav Controller in Angular JS as mentioned below.
weatherApp.controller('navCtrl', ["$scope", "$localStorage", function($scope, $localStorage){
if($localStorage.user_email){
var navItems = new Array();
navItems["/"] = 'Home';
navItems["/logout"] = 'Logout';
$scope.navItems = navItems;
}
else{
var navItems = new Array();
navItems["/"] = 'Home';
navItems["/login"] = 'Login';
$scope.navItems = navItems;
}
$scope.test = "test";
}]);
I am calling this controller in index.html as shown below.
<ul class="nav navbar-nav" ng-controller="navCtrl">
<li ng-repeat="(url, navItem) in navItems">
{{ navItem }}
</li>
</ul>
if I keep navItems indexes alphanumeric then it does not load values but if I keep its indexes numeric, it show menu items.
Is there any way by which I can use alphanumeric indexes in ng-repeat?

I think you need a diferent data structure. Something like this:
https://jsfiddle.net/relferreira/3aexpfk5/
JS:
angular.module('app', []);
angular.module('app')
.controller('MainController', mainController);
mainController.$inject = ['$scope'];
function mainController($scope){
var vm = this;
vm.navItems= [
{ path: '/', name: 'Home'},
{ path: '/login', name: 'Login'},
];
}
HTML:
<div data-ng-app="app">
<div data-ng-controller="MainController as mainVm">
<ul class="nav navbar-nav">
<li ng-repeat="navItem in mainVm.navItems">
{{ navItem.name }}
</li>
</ul>
</div>
</div>

Your syntax for ng-repeat is correct.
However, do not use Array. Initialize your objects as:
var navItems = {};
As a side note, keeping user email in LocalStorage sounds like a very unusual thing (if this is a client-server app), but of course this ultimately depends on your use case.

How to fetch Data from Array in Angular js

I am on a project in which I want to display data from array into <li> using Angular js
myid =[];
$scope.AddtoCart = function(){
myid.push( $scope.dataToCart);
srvaddtocart.addData(myid);
//console.log($scope.SharedCart);
}
$scope.One = function(){
$scope.AddtoCart();
$scope.SharedCart = myid;
console.log($scope.SharedCart);
$("#close").click(function(){
$(".oxy-product-cart").toggleClass("is-visible");
});
}
this is my js code where SharedCart is storing multiple ID
the output of the SharedCart is something like this
[1190,902,123]
How to display this Array in my HTML page
1190
902
123

<ul>
<li ng-repeat="item in SharedCart">{{item}}</li>
</ul>

Here is a simple example you can add to your HTML view
{{myid}}
<ul>
<li ng-repeat="item in myid">{{item}}</li>
</ul>

Doesn't work two ways of filtering (AngularJS)

I'm trying to make two ways of filtering (via clicking on letters or via typing in input field).
<body ng-controller="MainController">
<ul search-list=".letter" model="search">
<li class="letter" ng-repeat="letter in alphabet.letter">{{ letter }}</li>
</ul>
<div class="container" ng-controller="CountriesController">
<input id="q" type="text" ng-model="search " />
<ul>
<li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
</ul>
</div>
</body>
and js:
var app = angular.module('demo', []);
var controllers = {};
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
app.directive('searchList', function() {
return {
scope: {
searchModel: '=model'
},
link: function(scope, element, attrs) {
element.on('click', attrs.searchList, function() {
scope.searchModel = $(this).text();
scope.$apply();
});
}
};
});
controllers.MainController = function($scope) {
$scope.setTerm = function(letter) {
$scope.search = letter;
};
$scope.alphabet = {
letter: alphabet
}
};
controllers.CountriesController = function($scope){
$scope.countries = {
country:['Ukraine','Urugvai','Russia','Romania','Rome','Argentina','Britain']
}
$scope.startsWith = function (actual, expected) {
var lowerStr = (actual + "").toLowerCase();
return lowerStr.indexOf(expected.toLowerCase()) === 0;
}
};
app.controller(controllers);
On first look everything is working fine, but it is so only on first look...
When at first I click on any letter - filter works good.
When then I'm typing in input field - filter works good.
But after I typed in input field or delete text from there via 'backspace' button - filter by clicking on letters stops working...
Why it works like this and how I can fix this issue?
Here is my DEMO
Thanx in advance!

The problem fount for using two controler's. If you remove CountriesController , then everything working good.
The Search values was confused with which controller using that scope object.I think you don't need implement two controller for this scenario
See the working demo if you remove CountriesController.

change this part of html to this it works fine (ng-model="$parent.search ")
<div class="container" ng-controller="CountriesController">
<input id="q" type="text" ng-model="$parent.search " />
<ul>
<li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
</ul>
</div>

AngularJS: how to split functionality into many controllers

I have a single controller in my application http://jsfiddle.net/HKF9h/:
<div ng-controller="MyCtrl">
All Items:
<ul>
<li ng-repeat="item in items">{{item }} -
like it
</li>
</ul>
Items you liked:
<ul>
<li ng-repeat="item in likedItems">{{item }}
</li>
</ul>
</div>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.items= ['foo', 'bar', 'z'];
$scope.likedItems = [];
$scope.like = function (item) {
if($scope.likedItems.indexOf(item) === -1) {
$scope.likedItems.push(item);
}
}
</script>
}
I would like move all 'favoriting' functionality into sep controller that can be reused later. Here's what i did, but repeater is not showing likedItems anymore. What did I do wrong? http://jsfiddle.net/MR8wz/
<div ng-controller="MyCtrl">
All Items:
<ul>
<li ng-repeat="item in items">{{item }} -
<a href=""
ng-controller="FavoriteCtrl"
ng-click="like(item)">like it</a>
</li>
</ul>
Items you liked:
<ul ng-controller="FavoriteCtrl">
<li ng-repeat="item in likedItems">{{item }} //this one does not trigger
</li>
</ul>
</div>
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.items= ['foo', 'bar', 'z'];
}
function FavoriteCtrl($scope) {
$scope.likedItems = [];
$scope.like = function (item) {
console.log('you liked', item); //this one is displayed
if($scope.likedItems.indexOf(item) === -1) {
$scope.likedItems.push(item);
}
}
}

You shouldn't really be relying on controller inheritance for sharing data. It's a bad case of close coupling.
In Angular, if you want to share data, you're advised to use services/factories because:
They're easily injectable anywhere you need them
They're easily mockable
They're easily testable
FIDDLE
var myApp = angular.module('myApp',[]);
myApp.factory('Favorite', function(){
var likedItems = [];
function like(item) {
console.log('you liked', item); //this one is displayed
if(likedItems.indexOf(item) === -1) {
likedItems.push(item);
}
}
function getLikedItems(){
return likedItems;
};
return {
like: like,
getLikedItems: getLikedItems
};
});
function MyCtrl($scope, Favorite) {
$scope.favorite = Favorite;
$scope.items = ['foo', 'bar', 'z'];
}
function FavoriteCtrl($scope, Favorite) {
$scope.likedItems = Favorite.getLikedItems();
}
<div ng-controller="MyCtrl">
All Items:
<ul>
<li ng-repeat="item in items">{{item }} -
<a href=""
ng-controller="FavoriteCtrl"
ng-click="favorite.like(item)">like it</a>
</li>
</ul>
Items you liked:
<ul ng-controller="FavoriteCtrl">
<li ng-repeat="item in likedItems">{{item }}
</li>
</ul>
</div>

You use ng-controller directive two times
like it
and
<ul ng-controller="FavoriteCtrl">
It creates two different scope this is the reason it doesn't work. So if you move
$scope.likedItems = []; in parent controller MyCtrl then it works. Updated
fiddle