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)" >
Related
I have an image that I display using this:
<img data-ng-src="data:image/jpg;base64,{{selectedReport.reportImage.imageFile.data}}"/>
The above data is fetched from my database.
When the user clicks edit record and selects a new image which is stored in variable imageFile, I want to show this imageFile instead of the record fetched.
How do I use an if condition with data-ng-src?
Individually these work, but i want to apply an if condition where I say, if ImageFile, then
data-ng-src="{{imageFile}}"
else
data-ng-src="data:image/jpg;base64,{{selectedReport.reportImage.imageFile.data}}"
I tried to do like this:
data-ng-src = {{imageFile}} and data-err-src = "data:image/jpg;base64,{{selectedReport.reportImage.imageFile.data}}"/>
But this doesn't work.
I think you should just use a function, declared in your controller to deal with the situation.
In your controller :
$scope.getImage = function (){
return $scope.imageFile || [your_default_image_file];
}
In your HTML, something like :
<img data-ng-src="{{getImage()}}"/>
I hope it helps.
AngularJS views support binary operators
condition && true || false
So your img tag would look like this
<img data-ng-src="{{ imageFile != '' && imageFile || 'your-default-image' }}"/>
Note : You could use any condition to know if imageFile exists or has a value.
Note 2 : the quotes (ie 'your-default-image') are important here. It won't work without quotes.
My response from Java servlet via Angular, the request content is text/html
and I used data.split:
d = response.data.replace(/^\s+|\s+$/g, ''); // remove /r/n
data = d.split(" ");
for(var i =0 ; i<data.length; i++){
data[i] = '{' + data[i] + '}'; // add {} to each k.v
}
The result looks like:
["{key:myKey,value:true}", "{key:myKey,value:true}"....]
And my HTML
<ul>
<li ng-repeat="line in fixedDBArray">
{{line.key}} - {{line.value}}
</li>
</ul>
The anguler data-binding look like:
$scope.fixedDBArray = data //response.data
And {{fixedDBArray}} works fine but {{line.key}} and {{line.value}} do not work. I had checked http://jsonlint.com/ and the json is valid.
Anyone knows what is the problem?
If you still want to fix this as it stands now. you can use replace method and make the value valid JSON object. i made a sample implementation of this here
make sure that you use more efficient regular expression for adding additional quotes.just posting it for your reference without considering performance or complexity.
<ul class="alert alert-link alert-info"
data-ng-show="messages">
<li data-ng-repeat="msg in messages" data-ng-bind-html="msg | unsafe"></li>
</ul>
The controller code looks as below:
...
var msg = 'You\'re logged in. The registration must ' +
+ 'be <a href="#" ' +
+ 'data-ng-click="logout(\'/ajax/logout/\', $event)">logout</a> of your profile.';
$scope.messages = [msg];
...
How to $compile a msg, if msg comes from the server?
In general it's a really really terrible idea to compile things in angular directly from your backend. You can usually tell that if you're written the word unsafe in your code, you are putting yourself at risk. Not to mention it's going to be hard to find issues with the code if the code is on some other server/model/database somewhere. You should just return a model you can use from your server.
If you must do this, you'll probably want to create a directive which has something like element.html($compile(msg)(scope)) in your link function.
I am trying to capture the querystring and apply the value to my ng-include.
My querystring: http://mydomain.com/?target=W7ROP175T5TEHW2
My MainCtrl: $scope.target = $location.search()['target'];
$scope.target is picking up the value.
Doing a simple text write, ie {{target}} works.
This does not work: <div ng-include="'/_UserSession/{{target}}/assets/menu.html'"></div>
Any ideas?
You need to escape the value, it is an expression.
ng-include="'/_UserSession/' + target + '/assets/menu.html'"
Also if you want to make sure that target is set before it attempts to include the template, you can add ng-if ="target". This way it will avoid a bad request.
OK, I solved it, I hope this helps others as well:
HTML
<ng-include src="session()"></ng-include>
Controller
$scope.target = $location.search()['target'];
$scope.session = function() {
return "/_UserSession/" + $scope.target + "/assets/menu.html";
};
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' }}