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.
Related
I'm trying to echo the following HTML expression (got it from decoded jSON):
<ion-item>Dresses</ion-item></ion-item>
Using this:
<ion-item-group *ngFor="let category of categories"><ion-item-divider color="light">{{category.name}}</ion-item-divider>{{category.links}}</ion-item-group>
But the result is:
<ion-item-group><ion-item-divider color="light">Women Clothes</ion-item-divider><ion-item><a href="/category/latest-collection/women/dresses">Dresses</a></ion-item><ion-item></ion-item-group>
Any ideas? :-(
When I use ngTagsInput before send to database I do:
angular.toJson($scope.tags);
When I make get I receive something like this in my scope {{}}:
[{"text":"abc"},{"text":"cba"},{"text":"tag"}]
What can I do to show my tags like this:
abc, cba, tag
In the template:
<span ng-repeat="(key, value) in tags"><span ng-if="!$first">, </span><span>{{value.text}}</span></span>
Or with Underscore in code:
var str = _.pluck(list, 'text').join(', ')
Other options here: Show an aggregated list in angularjs
I'm trying to get images from a database, and then show them in order or their ids ascending.
In my controller, I have this.imageListFromDatabase = images.data.images;
which is an array of 24 objects. Each object is of the type
$$hashKey:"object:259"
batchId:"1470168280191"
createdAt:"2016-08-02T20:04:40.463Z"
dimensionUnits:"px"
displayName:"2008_005867.jpg"
fileName:"2f87c5ab8d7e7d02dd068a0df8ebf14c.jpg"
fileSize:"162941"
id:200
md5Hash:"2f87c5ab8d7e7d02dd068a0df8ebf14c"
rawHeight:"333"
rawWidth:"500"
updatedAt:"2016-08-02T20:04:40.463Z"
In my template, I'm trying to do:
<div class="imageContainer" ng-repeat="img in vm.imageListFromDatabase | orderBy:'id'">
<img class="imageListImage"
ui-sref="image({id: img.id})"
ng-src="{{[vm.storageLocation, img.fileName].join('')}}">
</div>
Can you tell me how I can order the images by id, and why this is not working the way it should?
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>"
I am trying to use data-ng-src to display a pictures in my angular application. I get a value from my database field called "pic". For example let say the return value of the field "pic" is 125(this is an integer value). I have a image file on my server called 125.jpg at file location
\\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\
I need to render this in my html, but I don't know how to attach the file location with the value in the binding {{e.pic}}. I need {{e.pic}} to pickup
\\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\125.jpg
but currently {{e.pic}} has an integer value of 125 (because that what it returned from sql server db). How can I make {{e.pic}} see the value of \someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\125.jpg. This is in an ng-repeat. Here is my code so far implementing the suggestion below.
<section class="mainbar" data-ng-controller="employees as vm">
....
<div class="padd" data-ng-repeat="e in vm.employees">
<div class="user">
<img data-ng-src="{{'\\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\' + e.pic + '.jpg' }}">
class="img-polaroid user-pic"/>
I am getting an error as follows:
Error: [$parse:lexerr] Lexer Error: Unterminated quote at columns
97-99 [' ] in expression
['\someserv\zpicturesFiles\zpicturesResources\Database\VFP\PhotoID\itc\portrait\'
+ e.pic + '.jpg' ]. http://errors.angularjs.org/1.2.12/$parse/lexerr?p0=Unterminated%20quote&p1=s%2097-99%20%5B'%20%5D&p2='%5C%5Csomeserv%5CzpictureFiles%5CzpicturesResources%5CDatabase%5CVFP%5CPhotoID%5Citc%5Cportrait%5C'%20%2B%20e.pic%20%2B%20'.jpg'%20
at http:// localhost:56014/scripts/angular.js:78:12
what is it not liking?
thanks
Nick
Fiddle Example. The reason I added the e.pick && '\...' is because ng-src will hide until the value is valid. In the fiddle you will see broken will flash with a broken image, until pathExt is set.
Use:
<img data-ng-src="{{e.pic && '\fileserver\pictures\' + e.pic + '.jpg' }}"
Alternatively create something on your scope to make it cleaner:
$scope.getImage = function(e){
return e && e.pic && ('\fileserver\pictures\' + e.pic + '.jpg');
}
HTML:
<img data-ng-src="getImage(e)" >