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
Related
I'm in a condition where I've got a JSON file with all my data.
Those data are generating an HTML component of my code.
The issue is that, occasionally, the component code needs to change: in particular, a <div> has to become a <a>, due to the presence of a link.
The end result should be like this:
<div class="container">
<div class="a b c">
content
</div>
<div class="a b c">
content
</div>
<a href="#" class="a b c">
content
</div>
</div>
my data structure is something like this:
'element1':{
'properties' = 'properties',
'isLink' = 'true'
},
'element2':{
'properties' = 'properties',
'isLink' = 'false'
},
I am printing the <div> or the <a> with a loop of Angular, but can't find a clean way to tell the code something like "if 'isLink' = 'true' print an <a>, else print a <div>".
The closest solution I've found is this one below, which prints a useless span that breaks all the CSS:
<div class="container>
<span ng-repeat="element in row.element">
<div ng-if="element.isLink == false">
content
</div>
<a ng-if="element.isLink == true">
content
</a>
</span>
</div>
Has anyone a solution to make it cleaner?
Thank you all.
You can do that by using ng-repeat-start and ng-repeat-end:
<div class="container">
<div ng-repeat-start="item in array" ng-if="!item.isLink">...</div>
<a ng-repeat-end ng-if="item.isLink" href="#">...</a>
</div>
I would replace the parent span with a div element because divs have
display: block;
by default, while spans have
display: inline;
and probably that is why your css is breaking. Your html/angularjs code seems perfectly fine to me. Try to solve your css problem instead.
<div class="darkblue-panel pn" ng-repeat="f in fc.frienddata">
<div class="darkblue-header" ng-show="f.user_id=='currentUser.id'">
<h5>{{f.user_id}}</h5>
</div>
<div class="darkblue-header" ng-show="f.friend_id=='currentUser.id'">
<h5>{{f.friend_id}}</h5>
</div>
</div>
currentUser is my rootscope variable which stores id when a user logs in.
friend_id and user_id are visible from my friend controller(which i have added) and so i know the values are present
but i dont know why the condition doesnt turn true cuz both the values show when i run this code
Remove quote of currentUser.id-
<div class="darkblue-panel pn" ng-repeat="f in fc.frienddata">
<div class="darkblue-header" ng-show="f.user_id==currentUser.id">
<h5>{{f.user_id}}</h5>
</div>
<div class="darkblue-header" ng-show="f.friend_id==currentUser.id">
<h5>{{f.friend_id}}</h5>
</div>
You can replace your code with my code.
<div class="darkblue-panel pn" ng-repeat="f in fc.frienddata">
<div class="darkblue-header" ng-show="f.user_id==currentUser.id">
<h5>{{f.user_id}}</h5>
</div>
<div class="darkblue-header" ng-show="f.friend_id==currentUser.id">
<h5>{{f.friend_id}}</h5>
</div>
We have to remove quotes because with quotes it's not a variable. After using quotes it will be now string.
I'm using the following view:
<ion-item collection-repeat="scan in scans" href="#/app/scans/{{scan.local_id}}">
<h2 class="media-heading">ID: {{(scan.id ? scan.id : '--')}}</h2>
<div class="row">
<div class="col">
<div><b>Status</b></div>
<div><b>Photos</b></div>
</div>
<div class="col">
<div>{{getStatus(scan.status)}}</div>
<div><span ng-init="setNumberOfPhotos(scan)" ng-bind="numberOfPhotos[scan.local_id]"></span></div>
</div>
</div>
</ion-item>
Everything is working fine, the controller function setNumberOfPhotos(scan) called with undefined value, and I see the error in the console:
TypeError: Cannot read property 'local_id' of undefined
at Scope.setNumberOfPhotos (file:///android_asset/www/components/scans/scan.list.controller.js:83:35)
The error appears many time, so at every loop, but it seems that ng-init doesn't evaulated at every loop. Any idea?
I have a very simple thing I am trying to do. The ng-click is not working. Any ideas why? Is there a problem with divs that are embedded in another div or am I just too sleepy? That item affected is not included in the code below, but no event is ever registered with the click.
<div ng-switch-when="3" ng-mouseenter="showIcons=true" ng-mouseleave="showIcons=false">
<div ng-if="editPerm" ng-show="showIcons" class="icon_holder" style="width: {{obj.mainwidth}}px;">
<div class="deletebutton"></div>
<div ng-click="equationShow=!equationShow" class="equationspecs"></div>
</div>
<div class="equationBlock">
<div class="eqshow" id="{{obj.itemid}}" ng-show="!obj.showEdit" ng-dblclick="obj.showEdit=!obj.showEdit">
<span mathjax-bind="obj.data.Format_left"></span>=
<span mathjax-bind="obj.data.Format_showequation"></span>=
<span mathjax-bind="obj.data.Format_showsolution"></span>
</div>
If you were able to click on a div with no content in it (sometimes a hard thing to do!), it would simply invert the value of equationShow on the scope.
But that would produce no visible difference. From what I can see in your example, the value of equationShow isn't being used in any way.
Based on your comment, you've probably got a problem with variable scoping.
If, for instance, you did something like this, it'd be more likely to work:
<div ng-init="myVariable = false">
<div ng-if="!myVariable">
<div ng-click="$parent.myVariable = !$parent.myVariable">Show the other div</div>
</div>
<div ng-if="myVariable">
Showing this div
</div>
</div>
I have the following in a view file:
<p class="presentation black">Sections:
<span data-ng-if="currentTab == 'tab1'">
<div ng-repeat="question in filtered = (template.questions | unique:'sectionName')"></div>
<p class="presentation black">{{filtered.length}}</p>
</span>
<span data-ng-if="currentTab == 'tab2'">
<div ng-repeat="sheet in filtered = (template.sections[0].sheets | unique:'name')"></div>
<p class="presentation black">{{filtered.length}}</p>
</span>
</p>
When tab1 is selected, the information is displayed correctly. However when on tab2, it appears that <p> element in both spans is being displayed - an empty value in displayed for the <p> element related to tab1. By looking at the DOM tree it also seems that when on tab2, the ng-if condition is not displaying: <!-- end ngIf: currentTab == 'tab2' -->. Can anyone see where the issue may be? Let me know if more code is required.
The "p" shouldn't be in a "span" according to HTML5 specs. Change the "span" to a "div".
HTML
<p class="presentation black">Sections:
<div data-ng-if="currentTab == 'tab1'">
<div ng-repeat="question in filtered = (template.questions | unique:'sectionName')"></div>
<p class="presentation black">{{filtered.length}}</p>
</div>
<div data-ng-if="currentTab == 'tab2'">
<div ng-repeat="sheet in filtered = (template.sections[0].sheets | unique:'name')"></div>
<p class="presentation black">{{filtered.length}}</p>
</div>
</p>