Angular 1.4.1 breaks ngBindHtml - angularjs

When migrating to Angular 1.4.1 the following code didn't work anymore :
<tr ng-repeat-start="row in displayedElts">
<td ng-repeat="col in tableSpec.columns" ng-bind-html="row.{{col.field}} | {{col.filter}}"></td>
</tr>
The error is the following :
Error: [$parse:syntax] Syntax Error: Token '{' is not a valid identifier at column 5 of the expression [row.{{col.field}} | {{col.filter}}] starting at [{{col.field}} | {{col.filter}}].
Any help would be greatly appreciated.
Update :
What i'm trying to do is the following :
display a generic table in which row are extracted from displayedElts
variable, columns description comes from tableSpec.columns in scope.
Each row has columns that is accessible by name contained in
tableSpec.columns,
It apply a filter on each column by finding the name of the filter in
the tableSpec.columns['name'].filter attribute.
Update 2 :
Filters which names are given by col.filter are declared regularly in Angular with such syntax :
angular.module('cld-apps.filters', []).
filter('cldFloatPercent', ['$translate', '$log',
function ($translate, $log) {
return function (floatCentValue, forceDeci) {
if (debug) $log.debug('Into cld-apps.filters.cldPercent');
return formatFloatCent($translate, floatCentValue, forceDeci) + ' %';
};
}]);
Sorry for not giving this informations sooner. I believe it was just a matter of syntax.
Jean-Marc

You can see on this link that ng-bing-html doesn't work this way.
you have to use expression in ng-bind-html like this:
Html code :
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
Script Code:
$scope.muHTML = "<h1>Hello World</h1>"

Related

ng-repeat not working in ui-popover-html

When ng-repeat is used in ui-popover-html, getting error -
Token 'item' is an unexpected token .
Code is given below:
<div uib-popover-html="'<span ng-repeat='item in ${this.myList}'>{{item}}</span>'"
popover-trigger="'mouseenter'"
popover-placement="auto bottom-right">
</div>
I don't want to use uib-popover-template. Need to achieve using uib-popover-html.

How do I compare with a string in ng-class?

This line doesn't seem to work for me.
Sort By: Alphabetical
Do I have to escape 'title' in orderProp == 'title' somehow?
in the controller I have
...
$scope.orderProp = 'title';
$scope.setOrder = function(sortBy){
$scope.orderProp = sortBy;
}
...
Thank you
Update: Using v1.3.0-beta.17
Adding ng-class="{active:orderProp=='pagetitle'} to
Alphabetical
throws an error
"Error: [$parse:syntax] http://errors.angularjs.org/1.3.0-beta.17/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=%7Bactive%3AorderProp%3D%3D&p4=%7Bactive%3AorderProp%3D%3D
Sorry for the way I present the error but I just started angular last week and don't know a better way
Update 2:
error seems to be coming from = == ===. I tried > and no error occured. Is there an alternative syntax to like eq?
Update 3 with solve
I mapped each string to an int pagetile->1 code->2 + data-ng-class="{active:orderPropIdx==1};"
Inside the controller I just do if pagetitle set active:orderPropIdx to 1 and so on
Maybe this is a bug in angular 1.3
As is stated in the comments, your class name should be surrounded by single quotes.
ng-class="{'active': orderProp == 'title'}">
This comparison is case sensitive.
Had the same issue when using ng-class. It refused to dynamically compute the class attribute even though the expression was successfully calculated.
And here is the workaround I've used for the ng-class statement:
Sort By: Alphabetical
instead of ng-class="{active: orderProp == 'title'} I've switched to class="{{orderProp == 'title' ? 'active' : ''}}"
I resolve in this way; 'ClassName':'{{Value}}'=='StringtoCompare', ...
ng-class="{ 'btn-danger' : '{{datasource.difficoltaRicetta}}'=='Difficile', 'btn-warning' :'{{datasource.difficoltaRicetta}}'=='Intermedia', 'btn-success' : '{{datasource.difficoltaRicetta}}'=='Facile'}"
I mapped each string to an int pagetile->1 code->2 + data-ng-class="{active:orderPropIdx==1};" Inside the controller I just do if pagetitle set active:orderPropIdx to 1 and so on
Maybe this is a bug in angular 1.3
This is for people coming to this answer looking for the solution with [ngClass].
<a [ngClass]="{ active: selectedValue === 'foo bar' }"> FooBar </a>
This would result in adding class="active" to the anchor element when the variable selectedValue is given the value "foo bar".
The syntax for ng-class can be quite confusing sometimes. Try this.
ng-class="{true: 'active', false: ''}[orderProp === 'title']"
Include square brackets after the curly braces. Inside the square brackets, you can declare any expression, and declare your results (true/false) and the corresponding classes you want to apply (active). And be sure to use '===' in your expressions, signifying you want orderProp to be exactly equal to what you are comparing it against.

Variable substitution while using messageformat with angular-translate

I'm using angular-translate with messageformat interpolation to pluralize some strings.
(for those who don't know what I'm talking about: http://angular-translate.github.io/docs/#/guide/14_pluralization).
It's going pretty well, but I can't figure out how to use variables instead of constants.
$translateProvider.translations('it', {
SELECTED_CATEGORIES: "{NUM, plural, =0{Nessuna categoria selezionata} one{1 categoria selezionata} other{# categorie selezionate}}"
}).translations('en', {
SELECTED_CATEGORIES: "{NUM, plural, =0{No category selected} one{1 selected category} other{# selected categories}}"
});
and this is the HTML code:
<span>{{ 'SELECTED_CATEGORIES' | translate:"{'NUM': 2 }" }}</span>
This works but if I use
<span>{{ 'SELECTED_CATEGORIES' | translate:"{'NUM': my_variable_in_the_scope }" }}</span>
I get an error. I tried to use quotes, double quotes and similar, but nothing seems to work.
I know that messageformat doesn't support expression evaluation, but I hoped that a variable substitution would have worked.
Any Idea?
Well, the correct solution should be passing the scope and accessing the value within the messageFormat code.
You can do this easily like this:
$translateProvider.translations('it', {
SELECTED_CATEGORIES: "{my_variable_in_the_scope , plural, =0{Nessuna categoria selezionata} one{1 categoria selezionata} other{# categorie selezionate}}"
}).translations('en', {
SELECTED_CATEGORIES: "{my_variable_in_the_scope , plural, =0{No category selected} one{1 selected category} other{# selected categories}}"
});
And your HTML:
<span>{{ 'SELECTED_CATEGORIES' | translate:your_scope }}</span>
Please note: I passed "your_scope" within the translate-filter and accessed "my_variable_in_the_scope" within the messageFormat code.
This should be the best solution.
To use variables in angular filters, you have to use
filter:{key: value} without quotes
E.g. my filter replaceVariable is used to enable rails yml placeholders being replaced with a js variable
usage:
{{ sometranslation | replaceVariable:{count:results} }}
filter:
// replaces {%count} in yml translations to work with angular
filters.filter('replaceVariable', function () {
"use strict";
return function (string, variable) {
var replace = string.replace(/%\{[\w\s]*\}/, variable.count);
return replace;
};
});
so i guess with translate you have to use it the same way. I remember i couldnt get this to work either which is why i chain my custom filter after
somevalue | translate | myCustomFilter

ng-repeat and filter not working AngularJS

I have an array which I print out it's elements based on which category is selected
<li class="thumbnail" ng-repeat="temp in templates| filter:{temp.category_id : selectedCategoryId }:true">
templates looks like this :
[{"id":"1","account_id":null,"category_id":"1","name":"Blue","thumbnail":"placehold.it/210x300","category_name":"test"},{"id":"2","account_id":null,"category_id":"1","name":"Red","thumbnail":"placehold.it/210x300","category_name":"test"},{"id":"3","account_id":null,"category_id":"2","name":"Green","thumbnail":"placehold.it/210x300","category_name":"test again"}]
Thanks for the help !
EDIT :
I also wanted to add an extra condition , that is temp.category_id == null , show all.
You don't need to specify temp again in the filter.
Change
filter:{temp.category_id : selectedCategoryId }:true
To
filter:{category_id : selectedCategoryId }:true
Here's a fiddle of it working: http://jsfiddle.net/Sqq3s/
Your filter should be:
<li ng-repeat="temp in templates | filter:{category_id : selectedCategoryId}:true"> ... </li>
Writing filter: {temp.category_id : selectedCategoryId} would look for property temp.category_id (which is an invalid name for a property, it should read 'temp.category_id') in the temp object. However, you want to look for the property category_id.

How can I bind scope variables stored in a .resx file in angularjs?

Currently I am working on a ASP .Net MVC project using angularjs where I need to instanciate a variable with a value stored in a .resx file which contains
a static string and angularjs scope variables which are binded to specific values in the controller. Below is the HTML and respective code :
Here is the HTML
<div ng-controller="myCtrl">
<div>
{{myvariable = '#Resource.Value' }}
</div>
<div>
{{fullName}}
</div>
</div>
where Resource.Value is a string contained in a .resx file with the following content:
' The First Name and Last Name is :' + LastName FirstName
Here is the angular controller:
function myCtrl($scope) {
$scope.LastName = 'Boxer';
$scope.FirstName = 'Jack';
$scope.fullName = $scope.myvariable;
}
Here the result of fullName becomes : "The First Name and Last Name is : null null"
but the expected result should be : "The First Name and Last Name is : Boxer Jack"
How can I accomplish the expected result "The First Name and Last Name is : Boxer Jack"
Any help will appreciated.
Note : I need to accomplish this because I am using locale resources files for different languages use and I need to display templated messages which its content can change dinamically
It seems that when you set myVariable the resource should become a string value in javascript. So this:
{{myvariable = #Resource.Value }}
would become this:
{{myvariable = '#Resource.Value' }}

Resources