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}}' }"
Related
Well, I have a hidden field in my form and trying to validate the ui-select element. I'm using the Angular-Validation plugin, which depends on the jQuery Validate plugin. On submit it shows the error label, but when the hidden fields gets it value from the ng-model, the error is still shown and also i am not able to submit the form.
Here's the html
<ui-select ng-model="noPostData.locaopt.id" theme="selectize">
<ui-select-match placeholder="Select Location">
{{$select.selected.name}}
</ui-select-match>
<ui-select-choices repeat="obj.id as obj in locaoptions | filter: {name: $select.search}">
<div ng-bind-html="obj.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
<input type="hidden" name="subloc_loca" ng-model="noPostData.locaopt.id">
Here's the options
$scope.validationOptions={
ignore: [],
rules: {
subloc_loca: {
required: true
},
message: {
subloc_loca: {
required: "Select location"
},
}
}
If the hiddden field is getting its value, why the error label is not going away. Why is this happening and how can i achieve this. Please help me
Typically, in these situations where a graphical element replaces the default, you have to get creative. In this case there is a input type="hidden" that is presumably replacing the select. Since jQuery Validate does not get automatically triggered when the value of the hidden element changes, you have to programmatically trigger this yourself.
Write a handler that forces validation of the hidden element that contains your value.
$('#Your-Graphical-Select-Element').on('focusout', function() {
$('[name="subloc_loca"]').valid(); // force validation test
});
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} }}
I am doing a directive using select2. In my screen I will have many select2 objects, so this is why I want to use a directive that I can reuse it many times.
This is the directive:
<div class='form-group'>
<p>{{title}}</p>
<ui-select ng-model="selectedItem" on-select="onChange($item);" theme="bootstrap">
<ui-select-match placeholder="{{placeholder}}">
{{selectedItem.state}}
</ui-select-match>
<ui-select-choices repeat="item in items | filter: $select.search">
<span ng-bind="item.state"></span>
</ui-select-choices>
</ui-select>
Then I can do this to pass the parameters in my index.html file:
<strainer-select
items="strainer.states"
selectedItem="strainer.selectedState"
handler="onStateChange"
title="Estados"
placeholder="Escolha um Estado"
></strainer-select>
My problem is: in select2 I need inform a property of my object to "bind" and be displayed in the view, like so:
{{selectedItem.state}}
But, of course, the property 'state' will not be available in all objects. If I have a "city" object it can be "cityName" or if I want display users it could be just "name" or "userName".
I want avoid to make a interceptor and modify all my data to replicate properties just to fit a generic "name" in the data. If my object is:
{
state: "Sao Paulo",
uf: "SP"
}
I do not want change it to:
{
state: "São Paulo",
uf: "SP",
name: "São Paulo" // replicated from "state" property
}
jus to use inside my directive.
So, I've tried pass the bind property name dynamically to the directive like this:
<strainer-select
items="strainer.states"
selectedItem="strainer.selectedState"
handler="onStateChange"
title="Estados"
placeholder="Escolha um Estado"
bindName="state"
></strainer-select>
And use it in the directive like this:
<span ng-bind="item.{{bindName}}"></span> // didnt work
<span ng-bind="item[{{bindName}}]"></span> // didnt work
<span ng-bind="item['{{bindName}}']"></span> // didnt work
And the ui-select-match looks worst....
<ui-select-match placeholder="{{placeholder}}">
{{selectedItem["{{bindName}}"]}} // didnt work
</ui-select-match>
but with no success.
Does anyone has a clue how I can dynamically change the property name used by ng-bind?
Thank you.
Try
<span ng-bind="item[bindName]"></span>
<ui-select-match placeholder="{{placeholder}}">
{{selectedItem[bindName]}}
</ui-select-match>
Whilst in ng-bind you do not need to escape the use of variables you are writing raw code - hence why you need to quote and direct usages of strings.
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
According to the documentation and other SO questions, I should be able to output a set of key/value pairs with ng-repeat
$scope.getFilters = function(){
return {
film : true,
game : true,
music : true,
sport : true,
tv : true
}
}
$scope.filters = $scope.getFilters();
Then this is my HTML
{{filters}}
<div
ng-repeat="(name,set) in filters"
>
{{name}} : {{set}}
</div>
But this is all I get from that:
{"film":true,"game":true,"music":true,"sport":true,"tv":true}
<!-- ngRepeat: (name,set) in filters -->
I've tried JS fiddles, it works. This is only a snippet of my code, there is more on the page but I can't paste it all here.
UPDATE: Just noticed this error:
Error: Duplicates in a repeater are not allowed. Repeater: (name,set) in filters key: boolean:true
This should work:
<div ng-repeat="row in [1,1,1] track by $index">
Check out this question for more details...Angular ng-repeat Error "Duplicates in a repeater are not allowed."
Hope this helps!