I have the following code running with angular v1.4.7
<img ng-repeat="x in modules" style="float:left" ng-src="{{moduleImagePath(x)}}"/>
The images paths are created by moduleImagePath(x) This function basically switches an image from a good status to a error status image which has _ERR appended to the image name:
$scope.moduleImagePath= function(item)
{
var name = item.name
if (item.idx === 0)
name = 'Master'
if (item.isLost === 1 || item.state != 'Op')
{
return 'img/' + name + '_ERR.jpg'
}
else
{
return 'img/' + name + '.jpg'
}
}
When the view is displayed, a timer starts polling for a json update that contains the modules data. Normally it is on a 500ms timer, however for debug I have made it 10 seconds.
The images never appear on screen, chrome inspector states that the images are loading but they are never requested at the webserver. They remain as "pending indefinitely:
Master.jpg (pending) Other 0 B Pending
Master_ERR.jpg (pending) Other 0 B Pending
EL1124.jpg (pending) Other 0 B Pending
EL1124_ERR.jpg (pending) Other 0 B Pending
EL4024.jpg (pending) Other 0 B Pending
EL4024_ERR.jpg (pending) Other 0 B Pending
EL2624.jpg (pending) Other 0 B Pending
EL2624_ERR.jpg (pending) Other 0 B Pending
EL4008_ERR.jpg (pending) Other 0 B Pending
EL4008.jpg (pending) Other 0 B Pending
The webserver is mongoose embedded in a C program running on localhost.
If I use the following code it works but of course needs to be handwritten for every use case:
<div ng-if="x.name == 'Master' && x.isLost === 0"> <img src="img/Master.jpg"/></div>
<div ng-if="x.name == 'Master' && x.isLost === 1"> <img src="img/Master_Err.jpg"/></div>
<div ng-if="x.name == 'EK1100' && x.isLost === 0"> <img src="img/EK1100.jpg"/></div>
<div ng-if="x.name == 'EK1100' && x.isLost === 1"> <img src="img/EK1100_Err.jpg"/></div>
<div ng-if="x.name == 'EL1124' && x.isLost === 0"> <img src="img/EL1124.jpg"/></div>
<div ng-if="x.name == 'EL1124' && x.isLost === 1"> <img src="img/EL1124_Err.jpg"/></div>
<div ng-if="x.name == 'EL2624' && x.isLost === 0"> <img src="img/EL2624.jpg"/></div>
<div ng-if="x.name == 'EL2624' && x.isLost === 1"> <img src="img/EL2624_Err.jpg"/></div>
<div ng-if="x.name == 'EL4008' && x.isLost === 0"> <img src="img/EL4008.jpg"/></div>
<div ng-if="x.name == 'EL4008' && x.isLost === 1"> <img src="img/EL4008_Err.jpg"/></div>
<div ng-if="x.name == 'EL4024' && x.isLost === 0"> <img src="img/EL4024.jpg"/></div>
<div ng-if="x.name == 'EL4024' && x.isLost === 1"> <img src="img/EL4024_Err.jpg"/></div>
It seems like the resources need to be pre-loaded before I can switch them around. Should this be done via css or another method?
I don't see any issues with your angularjs code.but you just to resolve your problem you can try out this way.
create an ng-switch just for x.isLost ( i know it is just a bool.still i prefer to use ng-switch instead of ng-if)
<div ng-switch on="x.isLost">
<img src="img/{{x.name}}.jpg" ng-switch-when="0"/>
<img src="img/{{x.name}}_ERR.jpg" ng-switch-when="1"/>
</div>
And just to check, are you running your webpage through localhost or your ipaddress ? sometimes when i try to access my webpage using by my IP i run into such kind of issues.
Related
I want to hide the button if it's the delete folder and show if it's the inbox. The code below does not work as the button is always shown.
<div class="message-footer-height" >
<div class="custom-div-class" ng-click="" >
<button class="custom-btn-default"
ng-hide="messageState.details && itemTappedValue = 'delete'"
ng-class="{ 'msg-btn' : userMessageDetails.id === -1 }"
ng-click="deleteMessage()" >
{{"button.delete"|translate}}
</button>
</div>
</div>
Thanks
You need to use ==, == is loose equality and === is strict equality. Read more here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
<div class="message-footer-height" >
<div class="custom-div-class" ng-click="">
<button class="custom-btn-default"
ng-hide="messageState.details && itemTappedValue == 'delete'"
ng-class="{ 'msg-btn' : userMessageDetails.id === -1 }"
ng-click="deleteMessage()">
{{"button.delete"|translate}}
</button>
</div>
</div>
You need double equal sign here itemTappedValue = 'delete'
I have this with a field. I want if the fild is empty, don´t show this div.
<div class="item noborder">
<img class="full-image" image-lazy-loader="lines" image-lazy-src="{{restaurantes.fornecedor_visual_foto2}}" />
</div>
How I can do it?
I tried:
<div ng-hide='{{restaurantes.fornecedor_visual_foto1}} = '' '>
<div class="item noborder"><img class="full-image" image-lazy-loader="lines" image-lazy-src="{{restaurantes.fornecedor_visual_foto1}}" /></div>
</div>
But it´s wrong...
It may also come back as undefined or null. You may want to try.
{{restaurantes.fornecedor_visual_foto1}} === '' || {{restaurantes.fornecedor_visual_foto1}} == undefined ||
{{restaurantes.fornecedor_visual_foto1}} == null
However I'd put this in my controller and call a function which would return a bool to keep the html clean
my problem is simple:
i'm doing this:
<div class="text-center tag row class_{{infoticket.tags[0]}}">{{infoticket.tags[0]}}</div>
<div ng-repeat="item in ticketcontent track by $index">
<div style="display: block"
class="container row col-md-offset-1 col-md-8"
ng-class="{true: 'agent', false: 'collab_infoticket.tags[0]'}
[item.author_id == 591119252 ||
item.author_id == 619780882 ||
item.author_id == 653783901 ||
item.author_id == 645192392 ||
item.author_id == 513340771 ||
item.author_id == 513345171]">
<div ng-class="mybind" ng-bind-html="item.html_body"></div>
<div>{{item.created_at | date}}</div>
<div ng-switch="item.author_id">
<div ng-switch-when="591119252">Agent: Mystique</div>
<div ng-switch-when="619780882">Agent: Batman </div>
<div ng-switch-when="653783901">Agent: Superman </div>
<div ng-switch-when="645192392">Agent:Iron Man </div>
<div ng-switch-when="513340771">Agent:Green Hornet </div>
<div ng-switch-when="513345171">Agent:Tornade </div>
<div ng-Switch-Default>Collaborateur: {{myname}}</div>
</div>
</div>
The problem is most of the time my class in css collab_infoticket.tags[0] is not working so i would like to know if it comes from a syntax problem. Which is weird is that sometimes it works ! However this class_{{infoticket.tags[0]}}always works.
I'm not sure what you're trying to do in that ng-class is valid syntax. Try a ternary operator instead:
ng-class="(item.author_id == 591119252 ||
item.author_id == 619780882 ||
item.author_id == 653783901 ||
item.author_id == 645192392 ||
item.author_id == 513340771 ||
item.author_id == 513345171)
? 'agent' : collab_infoticket.tags[0]}">
Note that collab_infoticket.tags[0] should be unquoted if you want the contents of that variable set as the classname; if quoted as you had it, you'll get the variable name itself as the classname.
(Or better still, calculate all of this inside the directive or controller, this is probably too much logic to be embedding in the template.)
I have a webpage which displays contents of a folder/directory upon clicking on it. If the contents of a folder has files, then download button is activated. If the contents of the folder is a directory, download button is inactive.
Here is my code that is supposed to make that work. But the Download button remains active all the time and never goes inactive. Can somebody point out where I'm going wrong ?
$scope.IsFile = function(filenames){
forEach(filenames, function(filename){
if(filename.indexOf(".zip") > 1|| filename.indexOf(".txt") >1 || filename.indexOf(".xml") > 1 ) {
return true;
}
else {
return false;
}
});
};
<div class="col-md-3" id="CTP Jobs">
<div ng-click="GetListOfFilesonCTP('/home/topas/rda_app/JOBS/')">
<a href="">
<h3>
JOBS <small> <span class="btn-group"
role="group">
<button type="button" class="btn btn-default" ng-disabled="IsFile(listOfFilesOnJobs)"
ng-click="download()">Download</button>
</span>
</small>
</h3>
</a>
</div>
<table class="table table-striped"
ng-init="GetListOfFilesonCTP('/home/topas/rda_app/JOBS')">
<tr ng-repeat="jobs in listOfFilesOnJobs"
ng-click="GetListOfFilesonCTP(getPath('/home/topas/rda_app/JOBS/', jobs))">
<!--'/home/topas/rda_app/JOBS/'+ jobs + '/' -->
<td>{{jobs}}</td>
</tr>
</table>
</div>
Your IsFile function does not return anything explicitly (i.e. it returns undefined) and ng-disabled interprets that as false. The return true and return false on lines 4 and 7 are relative to the function passed to forEach, which is probably not what you want. Did you mean to filter the list of files and check if any files are remaining? Something like this would do:
$scope.isFile = function(filenames) {
return filenames.filter(function(filename) {
return filename.indexOf(".zip") > 1 ||
filename.indexOf(".txt") > 1 ||
filename.indexOf(".xml") > 1
}).length > 0
}
I have an angular model page that has an array images. In my template I have this:
<div slide="slide" ng-repeat="slide in page.images" active="slide.active">
and I have tried to have es5-shim.js imported in all orders of precedence that can be. All other browsers render it correctly , except document mode IE8 (sharepoint 2010 forces this). In that I get:
TypeError: Object doesn't support this property or method<div class="item text-center ng-isolate-scope" active="slide.active" ng-repeat="slide in page.images" slide="slide" ng-transclude ng-class="{
'active': leaving || (active && !entering),
'prev': (next || active) && direction=='prev',
'next': (next || active) && direction=='next',
'right': direction=='prev',
'left': direction=='next'
}" ng-1398662894321="121">
The result is that inside that div, an <img ng-src="{{ slide.url }}" image gets a bad URL.
If I remove es5-shim.js I get also an error about not supported indexOf for the same row. Weird thing is, ng-repeat is working elsewhere in the app where I use angular-treeview.
What type error is this, if not indexOf, and is there a way to fix it?
you are using "slide directive" => slide="slide" and another slide in ng-repeat="slide in page.images" they are conflicting.
one more suggestion, always prefix your directive.
like ct-slide (ctSlide in javascript)