I want to use a internationalization option at my jQuery Mobile and jQuery webside. I tried to generate an example with the documentation on http://i18next.com but it seems I failed. Does anybody has experiences with i18next?
Here my example:
index.html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="js/i18next-1.5.6.min.js" type="text/javascript"></script>
<script src="js/translation.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div id="headline1" data-i18n="headline"></div>
<table width="100%" border="0" id="menu1" class="menu">
<tr id="surname">
<td width="50%" data-i18n="menu.surname"></td>
<td width="50%"> </td>
</tr>
<tr id="firstName">
<td width="50%" data-i18n="menu.firstName"></td>
<td width="50%"> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
Translation files:
/locales/de/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "Vorname:"
},
"headline": "Daten:",
"headline_1": "Daten Allgemein:",
"headline_2": "Daten Speziell:"
}
/locales/en/translation.json
/locales/dev/translation.json
{
"menu": {
"surname": "Name:",
"firstName": "First Name:"
},
"headline": "Data:",
"headline_1": "Daten Common:",
"headline_2": "Daten Specific:"
}
/js/translation.js
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init({ lng: language });
i18n.init({ debug: true });
$(".menu").i18n();
$("headline").i18n();
});
The translation for the menu I get is "menu.name" instead of expected "Name:".
For the headline I get no translation but I expected "Data:" or "Daten:".
If i try the following direct call I get no translation:
i18n.t("menu.surname", { defaultValue: "Name:"});
Does anybody know what the problem is? Or does anybody has a working example that fits what I try to do?
Main problem is you can't call i18n.t("menu.surname", { defaultValue: "Name:"}); directly after initialization, as loading the resources from server is async, so basically you try to translate before i18next fetched the resources.
Instead load it with callback:
$(document).ready(function(){
language_complete = navigator.language.split("-");
language = (language_complete[0]);
console.log("Sprache (root): %s", language);
i18n.init({ lng: language, debug: true }, function() {
// save to use translation function as resources are fetched
$(".menu").i18n();
$("headline").i18n();
});
});
or use flag to load resources synchron.
By the way:
Your html code has one closing </div> too many.
The call to $("headline").i18n(); should be $("#headline").i18n();.
<!DOCTYPE html>
<html>
<head>
<title>Basic Sample Usage</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18next.js" type="text/javascript"></script>
</head>
<body>
<h3> you can switch lng via ?setLng='lngTag' </h3>
<a id="en" href="?setLng=en"> en </a>
|
<a id="de" href="?setLng=de"> de </a>
<h3>loaded via attribute 'data-i18n' and $('.nav').i18n();</h3>
<h5>basic text</h5>
<ul class="nav">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<button id="btn" data-i18n="ns.common:add"></button>
<h5>extended usage of 'data-i18n' - apply to other attributes</h5>
<div id="extendedAttr">
<input data-i18n="[placeholder]ns.common:attr.placeholder;" type="text"></input>
<button data-i18n="[title]ns.common:attr.title;btn.hoverMe;"></button>
</div>
<script>
$.i18n.init({
//lng: 'en',
ns: { namespaces: ['ns.common', 'ns.special'], defaultNs: 'ns.special'},
useLocalStorage: false,
debug: true
}, function(t) {
//$('#navy').i18n(); for single
$('.nav').i18n(); // for group
$('#btn').i18n();
$('#extendedAttr').i18n();
});
</script>
</body>
</html>
locales/en/ns.special.json <=> make same for de/ns.speacial.json
{
"nav": {
"home": "en home",
"1": "en link 1",
"2": " en link 2"
},
"btn": {
"hoverMe": "en hover me!"
}
}
and locales/de/ns.common.json <=> make same for en/ns.speacial.json
{
"app": {
"company": {
"name": "my company"
}
},
"attr": {
"placeholder": "de translated placeholder",
"title": "translated title"
},
"add": "de add"
}
Related
I have an Array of Objects in AngularJS which consists of:
EmployeeComments
ManagerComments
ParticipantsComments.
[{
"id": "1",
"title": "Question1",
"ManagerComment": "This was a Job Wel Done",
"EmployeeComment": "Wow I am Surprised",
"ParticipantArray": [{
"id": "1",
"comment": "Oh i Dont think So"
}, {
"id": "2",
"comment": "Oh i believe the same"
}
]
}, {
"id": "2",
"title": "Question 2",
"ManagerComment": "This was a Job Wel Done 1",
"EmployeeComment": "Wow I am Surprised 1",
"ParticipantArray": [{
"id": "1",
"comment": "Oh i Dont think So 1"
}
]
}];
I iterate through this object to get textarea with comments from Object.
I have to show Save/Edit buttons in front of each textarea to edit comments , update comments or add any new comments.
I am not sure how to do dat as i am looking for a this like object which just works on individual textarea rather than all the textarea fields. Any suggestions.
Here is an example plnkr showing how this can be done.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.tableData = [{
"id": "1",
"title": "Question1",
"ManagerComment": "This was a Job Wel Done",
"EmployeeComment": "Wow I am Surprised",
"ParticipantArray": [{
"id": "1",
"comment": "Oh i Dont think So"
}, {
"id": "2",
"comment": "Oh i believe the same"
}
]
}, {
"id": "2",
"title": "Question 2",
"ManagerComment": "This was a Job Wel Done 1",
"EmployeeComment": "Wow I am Surprised 1",
"ParticipantArray": [{
"id": "1",
"comment": "Oh i Dont think So 1"
}
]
}];
$scope.tableDataCopy = angular.copy( $scope.tableData );
$scope.save = function() {
$scope.tableData = angular.copy( $scope.tableDataCopy );
}
});
Basically the controller just contains your data, together with a copy of it so that we do not write directly to the model (hence there would be no need for a save function).
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="data in tableDataCopy">
Manager comment:
<textarea ng-disabled="!edit" ng-model="data.ManagerComment"></textarea>
<br>
Employee comment:
<textarea ng-disabled="!edit" ng-model="data.EmployeeComment"></textarea>
<div ng-repeat="participant in data.ParticipantArray">
Participant {{participant.id}}: <textarea ng-disabled="!edit" ng-model="participant.comment"></textarea>
</div>
<button ng-click="save()">Save</button><button ng-click="edit = !edit">Edit</button>
<br>
<br>
<br>
</div>
{{tableData}}
<br>
<br>
{{tableDataCopy}}
</body>
</html>
This is just a very simple example of how to use repeaters, data binding and click events.
I am sure that you will be able to change the logic according to your specific needs from this example.
Edit: Updated the plnkr with individual controls
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="data in tableDataCopy track by $index">
Manager comment:
<textarea ng-disabled="!editManager" ng-model="data.ManagerComment"></textarea>
<button ng-click="tableData[$index].ManagerComment = data.ManagerComment">Save</button><button ng-click="editManager = !editManager">Edit</button>
<br>
Employee comment:
<textarea ng-disabled="!editEmployee" ng-model="data.EmployeeComment"></textarea>
<button ng-click="tableData[$index].EmployeeComment = data.EmployeeComment">Save</button><button ng-click="editEmployee = !editEmployee">Edit</button>
<div ng-repeat="participant in data.ParticipantArray">
Participant {{participant.id}}: <textarea ng-disabled="!participant.edit" ng-model="participant.comment"></textarea>
<button ng-click="tableData[$parent.$index].ParticipantArray[$index].comment = participant.comment">Save</button><button ng-click="participant.edit = !participant.edit">Edit</button>
</div>
<br>
<br>
<br>
</div>
{{tableData}}
<br>
<br>
{{tableDataCopy}}
</body>
</html>
Use ng-repeat to iterate through your object . assign each comment to a model in text area . So when ever you are going to edit or update that comment that value would be reflected in your object using two way binding of angular .
I have divs that are in different locations and are able to be moved and have a textfield. I am using a JSON file to store the coordinates for each different div as well as any text. I am also using angularjs for the interaction of the page. I got the draggable part down but I am having issues with saving the new coordinates as well as text. The user is suppose to click the save button and everything should be updated. I am using http.get to place the JSON file onto the page. I am stuck on how to use http.post to update the divs.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="container">
<head>
<meta charset="utf-8">
<title>efoli</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="containers.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="Style/design.css">
</head>
<body ng-controller="ContainerController as contain">
<div id="grid"></div>
<div class="container">
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand">NAME</a>
<form ng-submit="submit()">
<input type="submit" id="submit" value="save"/>
</form>
<ul class="nav navbar-nav navbar-right">
<li class=dropdown>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Account<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="drag resize" ng-repeat="product in contain.block" style="position:absolute; top:{{product.x}}; left:{{product.y}}" movement>
<h1>{{product.title}}</h1>
<textarea ng-model="newText" style="display:table-cell; width:inherit; height:inherit"></textarea>
</div>
</body>
</html>
container.js
(function() {
var app = angular.module('container', []);
app.controller('ContainerController', ['$http', function($http) {
var contain = this;
contain.block= [];
$http.get('data.json').success(function(data){
contain.block = data;
});
}]);
app.directive('movement', function(){
return {
restrict:'A',
link: function() {
$('.drag').draggable({grid:[25,25]});
$('.resize').resizable({grid:25});
}
}
});
}) ();
data.json
[
{ "title" : "Test1",
"text" : "",
"x" : "151px",
"y" : "350px" },
{ "title" : "Test2",
"text" : "",
"x" : "151px",
"y" : "700px" },
{ "title" : "Test3",
"text" : "",
"x" : "351px",
"y": "525px"},
{ "title" : "Test4",
"text" : "",
"x" : "251px",
"y" : "525px"},
{ "title" : "Test5",
"text" : "",
"x" : "451px",
"y" : "525px"}
]
I am learning AngularJS and ended up with the following code for ToDoList basic app. I viewed it in a browser it didn't work. I am new to the Angular and mightn't get obvious things, so I thought if my app name is
todoApp
Then I should put
$scope.todoApp
instead of
$scope.todo
but turned out that's not an issue.
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To DO List</title>
<link href="bootstrap.css" rel="stylesheet">
<link href="bootstrap-theme.css" rel="stylesheet>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var model = {
user: "Adam",
items: [{ action: "Buy flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
};
var todoApp = angular.module("todoApp", []);
todoApp.controller("ToDoCtrl", function($scope) {
$scope.todo = model;
});
</script>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h1>
{{todo.user}}'s To Do List
<span class="label label-default">{{todo.items.length}}</span>
</h1>
</div>
<div class="panel">
<div class="input-group">
<input class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done" /></td>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
That's what I get in a browser..
And that's what I guess I am supposed to get...
Why it doesn't work?
Your HTML getting invalid because you are missing " in link tag's rel attribute. Here you are missing:
<link href="bootstrap-theme.css" rel="stylesheet>
^ ==> missing "
Working DEMO /* updated css */
Have a look at Invalid HTML in DEMO. Here you can see after link tag HTML is colored green.
I am tring to create a TreeView with drag and drop functionality. I use this plugin
http://ngmodules.org/modules/angular-ui-tree, a demo is available here:
http://jimliu.github.io/angular-ui-tree/
But when I do the same thing things as written in the documentation my TreeViewdoes not load - why?
Here is my code.
<html ng-app="MyApp">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="https://dl.dropboxusercontent.com/s/jm6a2zekeh9kixj/angular-ui-tree.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/nxy1if8uz0ndudn/angular-ui-tree.js?m="></script>
</head>
<body>
<div ng-controller="ctr">
<div ui-tree >
<ol ui-tree-nodes="" ng-model="list">
<li ng-repeat="item in list" ui-tree-node>
<div ui-tree-handle>
{{item.title}}
</div>
<ol ui-tree-nodes="" ng-model="item.items">
<li ng-repeat="subItem in item.items" ui-tree-node>
<div ui-tree-handle>
{{subItem.title}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</body>
<script>
var myAppModule = angular.module('MyApp', ['ui.tree']);
myAppModule.controller('MainCtrl', function($scope) {
$scope.item = [{
"id": 1,
"title": "1. dragon-breath",
"items": []
}, {
"id": 2,
"title": "2. moiré-vision",
"items": [{
"id": 21,
"title": "2.1. tofu-animation",
"items": [{
"id": 211,
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"id": 212,
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"id": 22,
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"id": 3,
"title": "3. unicorn-zapper",
"items": []
}, {
"id": 4,
"title": "4. romantic-transclusion",
"items": []
}];
}
</script>
</html>
Plunker :
http://plnkr.co/edit/ueIUs4pDnWIrRKbVhvDq?p=preview
There is a syntax error, the last closing ) is missing in the bottom script block.
The controller name is mismatch, the MainCtrl is registered but the ctrl is used in ng-controller.
In the first ng-repeat="item in list", it loop over $scope.list but the data is in $scope.item.
Plunker: http://plnkr.co/edit/crEDsbbN5e7wKVKbFPlZ?p=preview
I am trying out the basics of AngularJS first time. I am trying out ng-repeat first time. However it is not working.
Here is a non working jsfiddle.
I have written the code in single standalone HTML file as follows and also angular.js file resides in the same directory
<html ng-app>
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var users = [
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
</script>
</head>
<body>
<div>
<div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
users must refer to a property that is accessible on the current scope. Scopes are AngularJS way of tying data from and to HTML. This is explained further in the "Model and Controller" chapter of the second tutorial page. See a working version of your Fiddle here.
HTH!
you have not define the controller such as
myapp.controller("AppController",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek"
},
];
});
/// than you can call controller to the view such as below code :
<body ng-controller="AppController">
<div><div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
Live Example you can access by this link : http://jsfiddle.net/9yHjj/
Your code should have been like this....
<html ng-app="app">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var app = angular.module("app",[]).controller(AppController,["$scope",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
}])
</script>
</head>
<body ng-controller="AppController">
<div>
<div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
<html ng-app="myapp1">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("myapp1",[]);
myapp.controller("AppController",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
});
</script>
</head>
<body ng-controller="AppController">
<div>
<div data-ng-repeat="user in users">
<h2 ng-bind="user.name"></h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
This code should work