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.
Related
Hi I need to have a expandable ui-gird, while expanding a row need to show the detail view of the selected row in Ul li.
I check in official site, but doesn't found anything, is it possible in ui-grid ?
Thanks
You need to provide your own expandableRowTemplate, showing the details of that row.
For example, see this Plunkr, based on the example's Plunkr :
expandableRowTemplate.html:
<div >{{row.entity.name}} ({{row.entity.age}})</div>
app.js:
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable']);
app.controller('MainCtrl', function MainCtrl($http, $log) {
var vm = this;
vm.gridOptions = {
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: '*',
showExpandAllButton: false
};
vm.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.then(function(response) {
vm.gridOptions.data = response.data;
});
vm.gridOptions.onRegisterApi = function(gridApi){
vm.gridApi = gridApi;
};
});
I have found many posts about how ng-repeat does not play well with objects, and expects the data to be an array, but my data is an array, it just happens to have a single object(list2). I get list1 fine, and everything works perfect. According to everything that I have found, list2 should work. Anyone know why it doesn't?
Data coming from my factory:
(function(){
var Factory = function(){
var model = {
list1: [
{
id: "1_1",
type: "header",
headerText: "1_1 Header",
secondaryHeaderText: "",
paragraphText: "1_1 Paragraph",
image: ""
},
{
id: "1_2",
type: "header",
headerText: "Header 1_2",
secondaryHeaderText: "",
paragraphText: "1_2 Paragraph",
image: ""
},
{
id: "1_3",
type: "header",
headerText: "1_3 Header1",
secondaryHeaderText: "1_3 Header2",
paragraphText: "",
image: ""
}
],
list2: [
{
id: "2_1",
type: "link",
headerText: "2_1 Header",
paragraphText: "2_1 Paragraph",
linkText: "2_1 Link Text",
image: ""
}
]
};
var factory = {};
factory.getList1 = function(){
return model.list1;
};
factory.getList2 = function(){
return model.list2;
};
return factory;
};
angular.module('designApp').factory('Factory', Factory);
}());
HMTL
<div>
<!--works perfectly fine -->
<div ng-repeat="item in list1" ng-include="'app/partial/list1.html'"></div>
</div>
<div>
<div ng-repeat="item in list2" ng-include="'app/partial/list2.html'"></div>
</div>
Controller
(function(){
var Controller = function($scope, Factory){
$scope.list1 = [];
$scope.list2 = [];
function init(){
$scope.list1 = Factory.getList1();
$scope.list2 = Factory.getList2();
}
init();
};
Controller.$inject = ['$scope', 'Factory'];
angular.module('designApp')
.controller('Controller', Controller);
}());
This is all that is in list2.html. Does not render any of the model data but renders the html tags, and throws no errors.
<h2>{{list2.headerText}}</h2>
<p>{{list2.paragraphText}}</p>
Thanks in advance for any help!
You have to replace
<h2>{{list2.headerText}}</h2>
<p>{{list2.paragraphText}}</p>
by
<h2>{{item.headerText}}</h2>
<p>{{item.paragraphText}}</p>
working plunkr:
https://plnkr.co/edit/FC5KPpOl7gsmfva63veq?p=preview
From Angular translate documentation:
$translate(translationId[, interpolateParams], interpolationId);
What is the purpose of interpolationId parameter, can you also give an example?
What is the purpose of interpolationId parameter...
The purpose of interpolationId is to reference the identifier returned by getInterpolationIdentifier of a custom interpolation that has been added. You can add a custom interpolation using $translateProvider.addInterpolation.
This is documented better in angular-translate's Pluralization documentation.
...can you also give an example?
Here's an example:
https://plnkr.co/edit/cDpNzZ6T6TSc13Qmji77
HTML
<body ng-controller="MyCtrl">
$translate('greeting', {}, 'custom'): {{ customGreeting }}
<br> $translate('greeting', {}): {{ regularGreeting }}
</body>
JavaScript
var app = angular.module('app', [
'pascalprecht.translate'
]);
app.config(["$translateProvider",
function($translateProvider){
$translateProvider.translations('en',{
"greeting" : "Welcome Dinesh"
});
$translateProvider.preferredLanguage('en');
$translateProvider.addInterpolation('customInterpolator');
}
]);
app.controller('MyCtrl', [
'$scope',
'$translate',
function ($scope, $translate) {
$translate('greeting', {}, 'custom').then(function (result) {
$scope.customGreeting = result;
});
$translate('greeting', {}).then(function (result) {
$scope.regularGreeting = result;
});
}
]);
app.factory('customInterpolator', [
function () {
var customInterpolator = {};
customInterpolator.$get = function () {
};
customInterpolator.setLocale = function (locale) {
};
customInterpolator.getInterpolationIdentifier = function () {
return 'custom';
};
customInterpolator.interpolate = function (string, interpolateParams) {
return 'My custom interpolation message';
};
return customInterpolator;
}
]);
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