I am working on internationalization in angular 2 using ng2-translate.
I have a label which contains string as follows:
<label> Step {{stepNumber}} of {{totalSteps}} </label>
where stepNumber and totalSteps are properties in my component.
for internationalization I am storing a key in my resource files and utilizing with ng2-translate pipe.
en.json:
{
"KEY_STEP_COUNT": "Step {{stepNumber}} of {{totalSteps}}"
}
fr.json:
{
"KEY_STEP_COUNT": "Étape {{stepNumber}} sur {{totalSteps}}"
}
an utilizing it in my html as follows:
<label> {{ 'KEY_STEP_COUNT' | translate}} </label>
The output I get is
en:
"Step {{stepNumber}} of {{totalSteps}}"
fr:
"Étape {{stepNumber}} sur {{totalSteps}}"
Expected Output:
en:
"Step 1 of 11"
fr:
"Étape 1 sur 11"
Is is possible to add an expression in a string binding with angular2?
I want to use angular2 bindings and not string.replace if it is possible.
Thanks for any help!!!
You have to add an object as a pipe parameter like :
{{ 'KEY_STEP_COUNT' | translate: {stepNumber: 15, totalSteps: 25} }}
Related
I have the following html code to get angular to translate the label from dash.title and the span text from errors.correct.
<label translate="dash.title"></label>
<span class="success text-small" translate="errors.correct" translate-values="{ fieldname: 'dash.title' | translate }"></span>
my errors.correctin the i18n file is like this:
"errors": {
"correct": "The « {{fieldname}} » is correctly filled out!"
}
so my fieldname has to get the value from the label, it should be the same as the label text.
Why this setup is not working? what is the solution?
here is the solution:
translate-values="{ fieldname:'{{'dash.title' | translate}}' }"
I'm new with angular, I started nearly a week ago, but there are some features I don't quite understand yet... so be kind.
I wanted to bind in a ng-repeat some HEX codes (from icomoon for example), but suddenly the "fantastic" angular failed:
var app = angular.module("foooooods");
app.controller("foodController",['$scope','$http','$log',function($scope,$http,$log){
$scope.meals = [
{name:'colazione', id:1, font:""},
{name:'brunch', id:2, font:""},
{name:'pranzo', id:3, font:""},
{name:'snack', id:4, font:""},
{name:'cena', id:5, font:""},
{name:'dopo-cena', id:6, font:""}
];
...
now the html:
<div class="pasto" ng-repeat="(idmeal, meal) in meals">
<label title="{{meal.name}}" class="af-font">
{{meal.font}}
<input type="radio" value="1"
ng-model="fCtrl.tab"
ng-change="fCtrl.openNewMeal(idmeal)">
</label>
<p>{{meal.name}}</p>
</div>
what happened? <div class="pasto"> was de facto repeated, but {{meal.font}} was printed as plain text.
then I come up with a filter:
app.filter('trust', ['$sce',function($sce) {
return function(val) {
return $sce.trustAsHtml(val);
};
}]);
but now I need to create an additional html element using the ng-bind-html, which I don't want... (if i don't use another element child in the <label> I loose its content) since the solution inline {{meal.font | trust}} inexplicably doesn't works.
<label title="{{meal.name}}">
<span class="af-font" ng-bind-html="meal.font | trust"></span>
<input type="radio" value="1"
ng-model="fCtrl.tab"
ng-change="fCtrl.openNewMeal(idmeal)">
</label>
help will be appreciated! THANKS.
NB - ng-bind-html-unsafe is deprecated.
I found out somewhere that unicode character are the solution. istead of an html entity write the unicode char:
//not working
{name:'colazione', id:1, font:""}
//perfectly working
{name:'colazione', id:1, font:"\ue900;"}
the secret is &#x<charcode> -> \u<charcode>. Maybe it will be helpfull for anyone looing for this simple achivement! bye
I have some data and a select control as you can see from my code sample below. It works for me but I want to be able to filter the data by type. In my code sample, I show one way I have tried to filter the data based on the type being a value of one. I am not sure if the way I am creating the select is causing this simple inline filter to not work or if I am doing something wrong?
$scope.data = [{
name : "5 play",
type : 1
}, {
name : "one on one",
type : 2}, {
name : "two on one",
type : 2}];
<select class="form-control" ng-model="selectedRule"
ng-options="item as (item.Name) for item in data track by item.Name | filter:{type:1}"></select>
As stated in angular docs, track by must always be the last expression:
Note: track by must always be the last expression
My guess is that all that follows is not considered, so that´s why your filter wasn´t applying. Moving the track by to the right place should fix it
Yes, as mentioned. Move the track by at the end and make the letter N lowercase like in the following demo or in this fiddle.
angular.module('demoApp', [])
.controller('mainController', MainController);
function MainController($scope) {
$scope.data = [{
name: "5 play",
type: 1
}, {
name: "one on one",
type: 2
}, {
name: "two on one",
type: 2
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
<select class="form-control" ng-model="selectedRule" ng-options="item as item.name for item in data | filter:{type:1} track by item.name"></select>
</div>
Assuming I have the following data which i get from the server using
$scope.users= UserResource.query();
//$scope.users= [{id: "1", name: "John"}, {id:"2", name: "Tom"}]
Is it possible to make typeahead bind to the NUMBER id instead of the STRING id?
For example, I want $scope.person.id to be 1 instead of "1" so I don't get any complaint from the angular when I select a value. Right now, because id is of type string, my number field gets this error: Error: [ngModel:numfmt] Expected 1 to be a number
Something like this:
<input ng-model="person.id class="form-control" type="number" typeahead="parseInt(user.id) as user.name for user in users | filter:$viewValue" />
The above doesn't work, and so does the following:
<input ng-model="person.id class="form-control" type="number" typeahead="user.id as user.name for user in users | filter: number | filter:$viewValue" />
P.S. Of course I don't need any client side validation for the id field. This is just a quick 30 secs example to illustrate the issue.
You can write your own filter for this and use it:
user.id as user.name for user in (users | stringToId:'user.id')
Iam Learning AngularJs ...
Example : -
My Json Having an array with some values as types :-
Lets Say A Restaurant would be Mexican or Italian Etc
My example
{
name:'res 123',
description:'Italian Rest'
types:['Mexican','Indian']
}
<input type="checkbox" data-ng-model="Mexican"/> // Iam Using Textbox Oncheck Filter Need to Filter all the Objects with types:['Mexican']
Filter Code :-
<div class="col-xs-12" data-ng-repeat="obj in objs| filter : objs.types[1]: Mexican" > <!-- Filter applied Like this -->
Realted looping
</div>
How can i Apply filter by taking the types:['Mexican'] value as Input for Filter On check ?
A built-in filter in Angular accepts a hash that specifies by what properties to match against each element in an array.
So, if you have an array of restaurants:
var restaurants = [
{ name: "foo", types: ["Mexican", "Indian"] },
{ name: "bar", types: ["Mexican"] },
{ name: "baz", types: ["Italian"] }
];
then if you need to filter by name, the input to filter would be {name: 'b'} - which would give you "bar" and "baz".
Likewise, if you need to filter by types - even though it is an array - a similar approach would work: {types: "Mexican"}.
And so, you just need to construct that object - let's call it filterBy.
<input type="checkbox" ng-model="filterBy.types"
ng-true-value="'Mexican'"
ng-false-value="undefined"> Mexican
<div ng-repeat="r in restaurants | filter: filterBy>
{{r.name}}
</div>
Demo