I have a dynamically populated tree list that I have shown and hidden. The problem is randomly, the entire list will vanish. Even things that don't have an ng-show are gone. I have tried pretty much everything and it still has the same effect. I am completely stumped.
<div class="legend" ng-show="legend">
<div class="upper_legend">
<span>Layer Legend</span>
</div>
<div class="lower_legend">
<div style="padding-left: 8px; min-height:10px" ng-repeat="layer in index.currentLayers track by $index">
<img src="images/down-arrow.png" style="cursor:pointer" width="10px" height="10px"
ng-click="index.currentLayers[$index].show= !index.currentLayers[$index].show"/><span
ng-click="index.currentLayers[$index].provenance =!index.currentLayers[$index].provenance;openProvenance(index.currentLayers[$index])"
style="cursor:pointer"> {{layer.name}}</span>
<div class="legend_data" ng-show="index.currentLayers[$index].show">
<span ng-repeat="color in layer.legendColors">
<span style="min-width:50px;height:20px;border-style:solid;border-width:1px;background:{{color.color}}"> </span> {{color.legend}}<br>
</span>
</div>
</div>
</div>
</div>
Does anyone have any idea why that could possible be happening? It isn't consistent either. It only happens when closing the tree and only on the first item clicked (regardless of index of the item). So, if I open and close the 3rd item, closing it will blank out the tree, but I can then open and close item 1 and it is fine every time, unless I close item 3 again. The same happens with any order.
You are missing closing </div> tag. Did you double check this (add it to end of this code block)?
Related
I have the following code snippet:
<div ng-hide="loading" ng-repeat="prov in providers">
<div data-toggle="collapse" style="position:relative;font-weight:bold;" data-target="#collapse-{{$index}}">{{prov.name}}
<div id="collapse-{{$index}}" class="collapse">
<div ng-repeat= "p in prov.subnets">
<div class="col-sm-7 col-md-7" style="font-weight:normal;font-size:90%">
{{p.zone}}
</div>
<div class="col-sm-5 col-md-5"><progress-bar></progress-bar></div>
</div>
</div>
</div>
</div>
I am attempting to make all the "p in prov.subnets" collapse into the relevant "prov.name". As you can see I have nested NG-repeats. If I run my code, it does collapse correctly the first time. However, If I expand them out and try and collapse them again It doesn't collapse and kind of "glitchily" shows a collapse animation.
I have used element inspector and it seems like $index is working correctly to name the divs. Has anyone any other suggestions?
I have ng-repeat loop which loops collection of image items in bootstrap carousel, and each image item has id, title and imagename property. Outside ng-repeat loop I have remove button with ng-click function that accepts imageid to delete it. But, as this button is outside loop, it doesn't have access to current image in loop.
<div ng-repeat="img in images" ng-class="{'active':$first}">
<img ng-src="folder/{{img.imagename}}">
<div class="carousel-caption">
<p>{{img.id}}</p>
<p>{{image.title}}</p>
</div>
</div>
<div ng-click="remove(img.id)">
<i class="fa fa-times fa-1x"></i>
</div>
If I put remove button inside loop it works, but is it possible to keep track of current image from loop and have only one remove button outside loop, to which I can pass id of current image (image displayed on carousel).
You should use some bindings like this one: https://angular-ui.github.io/bootstrap/#/carousel - it has the active image accessible.
This is not tested, you need to adapt it to your code.
<div uib-carousel active="active">
<div uib-slide ng-repeat="img in images track by img.imagename" index="img.imagename">
<img ng-src="folder/{{img.imagename}}">
<div class="carousel-caption">
<p>{{img.id}}</p>
<p>{{image.title}}</p>
</div>
</div>
</div>
<div ng-click="remove(active)">
<i class="fa fa-times fa-1x"></i>
</div>
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>
<div class="list-group bg-light no-border list-group-opt no-radius m-b-none">
<a class="list-group-item" on-tap="enterIndividual">
<div class="primary-info"
<div class="pull-left w-1x">
<img src={{avatar}} class="w-full r-3x"/>
</div>
<div class="pull-left m-l intro">
<span class="text-lg font-bold text-black m-b-sm">{{name}}</span>
<i class="fa fa-user"></i>
<div class="text-muted long-intro">
<span>{{detail}}</span>
</div>
</div>
</div>
</a>
</div>
It works well in computer,but when I tested it in my mobile,it had no react for touching.But if I use on-click instead of on-tap,it performs pretty well.So I am puzzled with this problem.Are there any requirement to use on-tap.Oh,it still has a strange point.If I touch it above a half of the div,it can work.What's the problem?
First, there are some errors in the code:
close the div.primary-info tag
a-tags are not allowed (HTML5) to contain block elements (div) - usually not a problem, but can cause some and will definitely not validate.
I guess your problem is, that the a-tag enclosing everything does not have the proper height and width. Try to give it a background and u'll see how large the a-tag is actually rendered as the tappable area.
U can simply skip the a-tag and move your event on-tag to the div.primary-info
It looks as though data-ng-hide works as expected except that it puts a space where the value would be shown. Is there a way to surpress that space so the values which should be shown are shifted to the right. For instance my loop has three people in it, but on the third person will be shown. The name for that person is to the far right rather than the first column on the left. I can't use data-ng-if as it removes values from the array.
This is the code:
<div class="row">
<label class="col-md-3" style="text-align: center">Checked Out to:</label>
<div class="col-md-8" ng-repeat="rows in chunkedData">
<div class="col-xs-4" ng-repeat="route in rows">
<span data-ng-hide="!route.checkedOut">{{route.user.firstName}} {{route.user.lastName}}</span>
</div>
</div>
</div>
This is the normal behavior: You're repeating a <div> that has the class "col-xs-4".
The ng-hide is inside it, meaning that for each route in rows, you'll display a column with or without text in it.
Try this instead :
<div class="col-xs-4" ng-repeat="route in rows | filter:{checkedOut:true}">
{{route.user.firstName}} {{route.user.lastName}}
</div>
AngularJS's documentation on ngRepeat and filters could also help you to better understand filters.