Just trying to get a handle on angularJS as was building a simple little app where you can make a list of people and in the list their names are colored. The color is chosen by a select drop-down box.
The trouble is any way I try to add the new color to a style I run into trouble. At this point names get added to the list correctly, but they don't get colored correctly and I get the following error:
Error: [$parse:syntax] Syntax Error: Token 'undefined' not a primary expression at column null of the expression [{color:] starting at [{color:].
http://errors.angularjs.org/1.2.16/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=%7Bcolor%3A&p4=%7Bcolor%3A
at http://localhost:8000/app/bower_components/angular/angular.js:78:12
at Parser.throwError (http://localhost:8000/app/bower_components/angular/angular.js:10266:11)
at Parser.primary (http://localhost:8000/app/bower_components/angular/angular.js:10239:14)
at Parser.unary (http://localhost:8000/app/bower_components/angular/angular.js:10492:19)
at Parser.multiplicative (http://localhost:8000/app/bower_components/angular/angular.js:10475:21)
at Parser.additive (http://localhost:8000/app/bower_components/angular/angular.js:10466:21)
at Parser.relational (http://localhost:8000/app/bower_components/angular/angular.js:10457:21)
at Parser.equality (http://localhost:8000/app/bower_components/angular/angular.js:10448:21)
at Parser.logicalAND (http://localhost:8000/app/bower_components/angular/angular.js:10439:21)
at Parser.logicalOR (http://localhost:8000/app/bower_components/angular/angular.js:10427:21) <li ng-repeat="player in players" ng-style="{color:" "stylecolor(player)"}="" class="ng-scope ng-binding">
Which I think means player.color is coming back null? If there is a way to do this without the function call that would be preferable I was just trying emulate this solution:
dynamically adding directives in ng-repeat
Here is my html:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Scratch Snake</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/app.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"> </script>
<!-- Bootstrap files -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/dist/jquery.js"> </script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body ng-controller = "PlayerAdditionCtrl">
<ul class="list-group">Players:
<li ng-repeat="player in players" ng-style = {color: "styleColor(player)"} > {{player.name}} </li>
</ul>
<div id="playerEntry">
<p>
<label for="playername">Name: </label><input id="playername" class="form-control" type="text" name="playername" ng-model="playername">
<select id="playerColor" ng-model="playercolor">
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
<option value="#ff0">Yellow</option>
</select>
</p>
<button type="button" class = "btn btn-primary" id="addPlayerBtn" ng-click="addPlayer()">Add Player</button>
<button type="button" class = "btn btn-success" id="doneBtn" onclick="moveToGame();">All Done!</button>
<button type="button" class = "btn btn-info" id="defaultsBtn" onclick="loadDefaults();">Load Defaults</button>
<br>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
And my controller:
'use strict';
/* Controllers */
angular.module('myApp.controllers', [])
.controller('PlayerAdditionCtrl', ['$scope', function($scope) {
$scope.players = [];
//add a player
$scope.addPlayer = function()
{
$scope.players.push(
{
name: $scope.playername,
color: $scope.playercolor
});
}
$scope.styleColor = function (player)
{
return { color: player.color }
}
}]);
remove
$scope.styleColor() in your controller
change
<li ng-repeat="player in players" ng-style = {color: "styleColor(player)"} > {{player.name}} </li>
to
<li ng-repeat="player in players" ng-style="{color: player.color}" > {{player.name}} </li>
Change
<li ng-repeat="player in players" ng-style = {color: "styleColor(player)"} > {{player.name}} </li>
to
<li ng-repeat="player in players" style="color: {{player.color}};"> {{player.name}} </li>
If you stick with ng-style, two-way data binding will update every player to the selected color. Without using angular.copy, changing your data structure, or doing something else to break two-way data binding, it won't be possible to have players be different colors.
Here's a working Plunker example: http://plnkr.co/edit/wEpKzN?p=preview
Related
First, I am a beginner in the process of learning. I have been experimenting with this code to load remote json data in to a ons-list. Can someone explain to me why the data is not loading in to the list? I am using Monaca. I can get the data to show up when using the UL tag. It just won't show up in the ons-list tag. Your help is very much appreciated!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<script src="components/loader.js"></script>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/onsenui/js/onsenui.min.js"></script>
<script src="lib/onsenui/js/angular-onsenui.min.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.ready(function() {
console.log("Onsen UI is ready!");
});
</script>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
</head>
<body>
<ons-page ng-app="myApp" ng-controller="customersCtrl">
<ons-toolbar>
<div class="center">Introduction</div>
</ons-toolbar>
<ul>
<li ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
<ons-row ng-repeat="x in myData">
<ons-col>{{ x.Name }}</ons-col>
<ons-col>{{ x.Country }}</ons-col>
</ons-row>
<ons-list ng-controller="customersCtrl">
<ons-list-item ng-repeat="x in myData">
{{ x.Name }}
</ons-list-item>
</ons-list>
</ons-page>
</body>
</html>
I was able to figure it out. I needed to change the line of code below.
var app = angular.module('myApp', ['onsen']);
The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
http://codepen.io/jcbowyer/pen/wGrLmE
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<button kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-on-click="mnuProfile.open($('#btnProfile'))"></button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I figured out how to get this work with k-rel insteal of open.
Updated code is below
Codepen here
http://codepen.io/jcbowyer/pen/KzyQwa
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<a kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile"
k-rel="'actionsheet'"
href="#mnuProfile"></a>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" id="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
This is the error msg.
Error: This function is not registered in the lock list.
at Object.window.DoorLock.DoorLock._unlock (loader.js:1450)
at window.DoorLock.DoorLock.lock.unlock (loader.js:1450)
at Scope.parent.$get.Scope.$broadcast (loader.js:1444)
...
index.html
<!DOCTYPE HTML>
<html ng-csp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<script src="js/winstore-jscompat.js"></script>
<link rel="stylesshet" href="components/monaca-onsenui/js/angular/angular-csp.css">
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script src = "./js/prog.js" ></script>
</head>
<body ng-app = "magic_land" >
<ons-navigator var="captain" page="list.html">
</ons-navigator>
</body>
</html>
...
list.html
<div >
<ons-toolbar>
<div class = "center">All todoz</div>
</ons-toolbar>
<ons-list>
<ons-list-item>Apple</ons-list-item>
<ons-list-item>Banana</ons-list-item>
<ons-list-item>Carrot</ons-list-item>
</ons-list>
<p> {{5+5}} </p>
</div>
...
prog.js
var magic_land = ons.bootstrap('magic_land', ['onsen']);
Where is this error coming from?
Before
<body ng-app="magic_land" ng-controller = "magic_action">
<ons-navigator var="captain" page="list.html" >
</ons-navigator>
</body>
After
<body >
<ons-navigator var="captain" page="list.html" ng-app="magic_land" ng-controller = "magic_action" >
</ons-navigator>
</body>
Now that error is gone!
I know, this code is different from the question , but it was a tough error so i had to swap and rearrange my codes to find the source of error. Good luck!
So, I'm trying to get angularjs working with KendoUI mobile...hybrid mobile app.
HTML:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="kendo/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ngApp.js"></script>
</head>
<body>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<ul data-role="listview">
<li>
Home
</li>
<li>
Settings
</li>
<li>
Contacts
</li>
</ul>
</div>
AngularJS:
(function () {
var ngApp = angular.module("MyApp", ["kendo.directives"]);
ngApp.controller('HomeController', ['$scope', function ($scope) {
$scope.foo = 'something';
alert("HOME CONTROLLER");
}]);
}());
Part View HTML:
<div data-role="view" data-title="AskLaw" data-layout="main" data-model="APP.models.home" ng-controller="HomeController">
<h1 data-bind="html: title"></h1>
<span>{{foo}}</span>
</div>
What I'm thinking "should" happen is the ng-controller="HomeController" should cause the HomeController to fire and populate the $scope.foo variable. This should bind to the {{foo}} on the view page as well as show the alert...not happenin'.
Any ideas?
Kendo UI developer here, the Kendo UI mobile application and AngularJS do not work well together currently. The good news is that this is something we are actually working on right now - it will be released in our upcoming 2014 Q3 release, due November.
The Telerik resource linked here should be helpful to devs looking to optimally integrate AngularJS functionality into Kendo UI Mobile: http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial
I am facing similar issues while using angularJS-translate module.
Reference Url to similar issue:
i18n using Angular Translate StaticFilesLoader
This is my JS code:
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'locale-',
suffix: '.json'
});
$translateProvider.preferredLanguage('en_US');
});
app.controller('langController', ['$scope', '$translate', function ($scope, $translate) {
$scope.switchLanguage = function (key) {
$translate.use(key);
};
}]);
html:
<!doctype html>
<!--[if lt IE 7]> <html class1="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="Description" content="angular translate brings internationalization (i18n) and localization (l10n) to your Angular apps!">
<meta name="fragment" content="!">
<title>angular translate - i18n for your Angular apps, made easy.</title>
<script src="js/angular.js"></script>
<script src="js/angular-translate.min.js"></script
<script src="https://rawgithub.com/PascalPrecht/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div class="span4">
<div class="well">
<h2 translate>Hello</h2>
<p translate>This is a paragraph</p>
<p translate>Welcome to Hello world!</P>
</div>
<div ng-controller="langController">
<button class="btn" ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN" class="ng-scope">english</button>
<button class="btn" ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE" class="ng-scope">german</button>
</div>
<hr>
<div ng-controller="langController">
<select ng-model="lang" ng-selected="selected">
<option disabled="disabled" selected="selected">Select Language</option>
<option ng-click="changeLanguage('en')" class="ng-scope">English</option>
<option ng-click="changeLanguage('de')" class="ng-scope">German</option>
</select>
</div>
</div>
</body>
</html>
locale-en_US.json:
"TITLE":"Hello",
"FOO":"This is a paragraph.",
"BUTTON_LANG_EN":"english",
"BUTTON_LANG_DE":"german",
"TEXT":"Welcome to Hello world!"
locale-de_DE.json:
"TITLE":"Hallo",
"FOO":"Dies ist ein Paragraph.",
"BUTTON_LANG_EN":"englisch",
"BUTTON_LANG_DE":"deutsch",
"TEXT":"herzlich willkommen auf Hallo Welt!"
i have placed .js,.html, locale-en_US.json,locale-de_DE.json language files in the same folder and I am not able to get the output as desired , getting error in Firefox console: Error: [$injector:unpr] Unknown provider: $translateStaticFilesLoaderProvider <- $translateStaticFilesLoader.
Can you help me on this please?
Thanks,
Ketan
change ng-click="changeLanguage('en')"
with: ng-click="changeLanguage('en_EN')"
change ng-click="changeLanguage('de')"
with: ng-click="changeLanguage('de_DE')"
the language json file is
{
"TITLE":"Hallo",
"FOO":"Dies ist ein Paragraph.",
"BUTTON_LANG_EN":"englisch",
"BUTTON_LANG_DE":"deutsch",
"TEXT":"herzlich willkommen auf Hallo Welt!"
}
You need this js in index file
<script src="https://rawgithub.com/PascalPrecht/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>