i am using https://angular-translate.github.io/ module for translation
my key array is
$scope.array = [
"full_name",
"email",
"phone_no"
];
and my translation for that is
$translateProvider.translations('en', {
full_name:'full name',
email:'email',
phone_no:'phone no'
});
and have code like this
<div ng-repeat="item in array">
{{item | translate}}
</div>
but i can't get translation. can anyone help to do proper way ??
Have you set the preferred language in the configuration? If you don't do so, the 'en' translations won't be applied.
.config(function($translateProvider) {
$translateProvider.translations('en', {
/* ... */
});
$translateProvider.preferredLanguage('en');
});
Live demo
This should do it
angular.module('app', ['pascalprecht.translate'])
.config(function($translateProvider) {
$translateProvider.translations('en', {
full_name: 'Full name',
email: 'Email address',
phone_no: 'Phone number'
});
$translateProvider.preferredLanguage('en');
$translateProvider.fallbackLanguage(['en']);
})
.controller('MainCtrl', function($scope) {
$scope.array = ['full_name','email','phone_no'];
});
Related
I'm new to angularjs.
I'm making an application which uses angularjs and Ng tags input.
Everything is fine, but I can't translate the source which is bound to ng tags input.
Here is my code :
<tags-input ng-model="tags"
add-on-paste="true">
<auto-complete source="Fruits"></auto-complete>
</tags-input>
And in my controller, I have :
var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
PINE_APPLE: 'Pine apple',
LEMON : 'Lemon',
TOMATO: 'Tomato'
});
$translateProvider.preferredLanguage('en');
});
app.controller('Ctrl', function ($scope, $translate) {
$scope.Fruits = [
{
text: 'TOMATO',
value: 1
},
{
text: 'PINE_APPLE',
value: 2
},
{
text: 'LEMON',
value: 3
}];
$scope.changeLanguage = function (key) {
$translate.use(key);
};
});
My question is : how can I translate my Fruits inside Ctrl controller to bind to ng tags input ?
Can anyone help me please ?
Thank you.
To translate the texts into a JSON object , you could try to translate the texts and then create the object with these translated texts.
var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
TOMATO: 'Tomato'
});
$translateProvider.preferredLanguage('en');
});
app.controller('Ctrl', function ($scope, $translate) {
var TEXT_TRANSLATED = $translate.instant('TOMATO'); //NEW LINE
$scope.Fruits = [
{
text: TEXT_TRANSLATED,
value: 1
}
];
I hope you find it useful!
Thank you , juvian
Finally, I tried to apply custom template of ng-tag input as you said, and it worked with dynamic translation.
I'm using 'Angular Slick' to make a carousel, everthings working as I wanted, except for 'autoplaySpeed' property, when I use it, it is not working, in the docs there is nothing related to...
HTML:
<slick init-onload="false" slick-apply='slickApply' autoplaySpeed="3000" data="dataLoaded" autoplay="true" slides-to-show="1" dots="true">
<div ng-repeat="item in carouselItems">
<h2 class="starter-benefits__title">{{item.title | translate}}</h2>
<h6 class="starter-benefits__info">{{item.message | translate}}</h6>
</div>
</slick>
JS.
angular.module('app')
.controller('initCtrl', function($scope, $timeout) {
$scope.carouselItems = [];
$timeout(function() {
$scope.carouselItems = [
{
title: 'LABEL_INIT_CAROUSEL_FIRST_TITLE',
message: 'LABEL_INIT_CAROUSEL_FIRST_MESSAGE'
},
{
title: 'LABEL_INIT_CAROUSEL_SECOND_TITLE',
message: 'LABEL_INIT_CAROUSEL_SECOND_MESSAGE'
},
{
title: 'LABEL_INIT_CAROUSEL_THIRD_TITLE',
message: 'LABEL_INIT_CAROUSEL_THIRD_MESSAGE'
},
{
title: 'LABEL_INIT_CAROUSEL_FOURTH_TITLE',
message: 'LABEL_INIT_CAROUSEL_FOURTH_MESSAGE'
}
];
$scope.dataLoaded = true;
}, 2000);
});
Hope guys can help me figure out what's going on.
Thank you.
Given the reference example of angular translate:
var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'english',
BUTTON_LANG_DE: 'german'
});
$translateProvider.translations('de', {
TITLE: 'Hallo',
FOO: 'Dies ist ein Paragraph.',
BUTTON_LANG_EN: 'englisch',
BUTTON_LANG_DE: 'deutsch'
});
$translateProvider.preferredLanguage('en');
});
app.controller('Ctrl', function ($scope, $translate) {
$scope.changeLanguage = function (key) {
$translate.use(key);
};
});
I want dynamically add a limitTo option which limits the length of the translation showed.
Lets say i have controller ctrl with variable x
ctrl.x='FOO'
Then i have a html snippet
<span translate="ctrl.x"></span>
I would like somehow to write
<span translate="ctrl.x" limitTo=7>
and then the output would be
This is
How do i accomplish this?
I was playing around with some jsfiddle examples and changed it for some tests. Unfortunately it is not working anymore and i have no clue why. Can anyone have a quick look at this fiddle and give me a hint:
http://jsfiddle.net/w8LrL8xr/2/
javascript:
var myApp = angular.module("myApp");
myApp.controller("MyCtrl", function($scope) {
$scope.fonts = [
{title: "Arial" , text: 'Url for Arial' },
{title: "Helvetica" , text: 'Url for Helvetica' }
];
$scope.change= function(option){
alert(option.title);
}
}
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="opt" ng-options="font.title for font in fonts" ng-change="change(opt)">
</select>
<p>{{opt}}</p>
</div>
</div>
Your module definition is incorrect, you need to supply a list of dependencies to init it correctly or an empty [] if you have none.
e.g.
var myApp = angular.module("myApp", []);
You are also missing a trailing ) when you register your controller.
var myApp = angular.module("myApp", []);
myApp.controller("MyCtrl", function($scope) {
$scope.fonts = [
{title: "Arial" , text: 'Url for Arial' },
{title: "Helvetica" , text: 'Url for Helvetica' }
];
$scope.change= function(option){
alert(option.title);
};
});
Fixed fiddle
I'm tring to send backend by ejs to the frontend , controller of angularjs
app.js
i pass data to view/indexcontens.
var users = [
{
name: 'john',
email: 'john#email.com'
},
{
name: 'peter',
email: 'peter#email.com'
},
{
name: 'max',
email: 'max#email.com'
}
];
app.get('/partials/indexContents.html', function(req, res) {
res.render('partials/indexContents', {users:users})
});
app.get('/partials/about.html', function(req, res) {
res.render('partials/about')
});
views/partials/indexContents
i made it global variable.
<div>
<h3>home</h3>
<p>wecome to my blog. I hope you enjoy the content!</p>
<ul>
<li ng-repeat="post in blogposts">{{post}}</li>
</ul>
</div>
<script>
users = "<%=abc=users[0].name%>";
</script>
public/js/contollers.js trying to get the global variable
var app= angular.module('blog',['ngRoute']);
app.config(function($routeProvider) {
//set up routes
$routeProvider
.when('/home',{
templateUrl:'partials/indexContents.html',
controller:'SimpleController'
})
.when('/about',{
templateUrl:'partials/about.html',
controller:'AboutController'
})
.otherwise({
redirectTo:'/'
});
});
app.controller('SimpleController', function($scope){
$scope.blogposts=[
'blog post1',
'blog post2',
window.users
];
});
app.controller('AboutController', function($scope){
$scope.name="graum";
$scope.bio="i just made it";
});
but it only display blank instead of 'john'.
Please give me a solution, thank you
Why dont you use $resource to get the name from server? I know this is not the best option and certainly not what you are looking for but this way it works for sure.
however you can try this too
<script>
(function() {users = "<% users[0].name%>";})();
</script>