I have a weird question regarding the no-show
I have something like
<ul>
<li ng-repeat="item in items" >
<a ng-click="showNew =! showNew">{{item.text}}
<span ng-show="showNew">New Items!</span>
</a>
</li>
<li ng-show="showNew">
<a >Category 1 </a>
</li>
</ul>
For some reason, only the 'New Items!' was shown when I click a tag. The Category 1 would never show. I thought showNew would be in the same scope for everything in my case. How do I solve this? Thanks a lot!
You can use ng-init to create the variable higher up in the template and that should help. This is not an ideal fix but it is quick and easy if you don't want to edit other files.
EDIT: you will need to use dot notation in your model so the angular scope magic can work. (this is the equivolent of $scope.nested = {showNew: false}
<ul ng-app ng-init="nested.showNew=false">
<li ng-repeat="item in [1,2,3]" >
<a ng-click="nested.showNew =! nested.showNew">{{$index}}
<span ng-show="nested.showNew">New Items!</span>
</a>
</li>
<li ng-show="nested.showNew">
<a >Category 1 </a>
</li>
</ul>
http://jsfiddle.net/0692dbak/
Related
I have simple Bootstrap 3 toggle navigation :
<ul class="nav navmenu-nav clearfix" >
<li class="navmenu-brand dropdown clearfix">
<i class="fa fa-home"></i><i class="title"> Menu item 1 </i><span class="fa fa-chevron-left"></span>
<ul class="dropdown-menu" role="menu">
<li class="clearfix">
test 1
</li>
<li class="clearfix">
test2
</li>
</ul>
</li>
<li class="navmenu-brand dropdown clearfix">
<i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span>
<ul class="dropdown-menu" role="menu">
<li class="clearfix">
Test 3
</li>
<li class="clearfix">
Test 4
</li>
</ul>
</li>
</ul>
I need when click on Test 1 and go to that page,to that part of menu be open on that page.Etc, if I click on test 3,url take me on test 3 page ,to have open second part of menu...
I try with similar problems, but no result,when go to page,menu is collapsed.
Bootply Link
I don't have much time but I am going to suggest a procedure for you. so I suggest you save the variable with Jquery using cookies:
you might need to call this: <script src="/path/to/jquery.cookie.js"></script> and on github plugin link is right here: jquery cookie
Now give an id to all of your dropdowns link
<i class="fa fa-video-camera"></i><i class="title"> menu item 2 </i><span class="fa fa-chevron-left"></span>
add an event listener to get the id of the dropdown link being click:
just like it is done here: get id of item clicked
store the value in a variable known as myVariable
$.cookie('cookieName', 'myVariable');
you can set expiry date
$.cookie('cookieName', 'myVariable', { expires: 1 });//expires after a day
in the other page, you read the cookie and store it in new variable:
newVariable = $.cookie('cookieName');
use that variable for your dropdown to be enabled
$(newVariable).dropdown('toggle');
Other things you might want to check is: send variables -cookies method in javascript, Open a dropdown automatically, store id of a link
I am using twitter-bootstrap-rails gem. I have following HTML:
<div id="scroll-nav">
<ul class="nav nav-pills">
<li class="active">
<a href="#somelink1">
<div>text1</div>
</a>
</li>
<li>
<a href="#somelink2">
<div>text2</div>
</a>
</li>
<li>
<a href="#somelink3">
<div>text3</div>
</a>
</li>
</ul>
</div>
I also have following javascript:
$('body').scrollspy({target: '#scroll-nav'});
Scrollspy does not work, I do not get any JS errors. Am I missing something?
the documentation says:
Navbar links must have resolvable id targets. For example, a home must correspond to something in the DOM like <div id="home"></div>.
I would like to do this really basic example :
<div ng-controller="ctrl">
<li ng-repeat="config in configs">
<span >Config : {{config}}</span>
<li ng-repeat="version in versions">
{{config}}
</li>
</li>
</div>
So basically, I got 2 imbricated ng-repeat loop, and I would like to access a value of the first loop from the second one.
I thought it was really basic, but no way to make it work. My result of that is 1 liwith the config printed, and 3 empty sub lis
I already tried a lot of combination list {{$parent.index}}, {{$parent.config}} etc ...
I'm pretty sure this has to do with the structure of your HTML.
Here is a working plunker.
Since you are omitting the <ul> tags that are required for lists. The nested <li> is causing a display issue.
I have simple wrapped the <li> with <ul> and it seems to work fine:
<div ng-controller="ctrl">
<ul>
<li ng-repeat="config in configs">
<span >Config : {{ config }}</span>
<ul>
<li ng-repeat="version in versions">
VersionConfig: {{ config }}
</li>
</ul>
</li>
</ul>
</div>
<ul id="component-list" class="no-left-margin">
<li class="component-items hide">
<span>Login</span>
<a href="#">
<i class="icon-remove"></i>
</a>
</li>
<li class="component-items">
<span>Register</span>
<a href="#">
<i class="icon-remove"></i>
</a>
</li>
</ul>
I'm trying to get a list of items that are visible (span tags inside li tags without the hide class)
$('.component-items span').not('.hide');
The above selector is giving me an empty array.
I need the selector to give me the span tags within <li> without the hide class.
$('.component-items').not('.hide').find('span');
$('.component-items:visible span')
http://api.jquery.com/visible-selector/
Cheers!
I like to use css pseudo class :not().
$(".component-items").find("span:not(.hide)")
Hope it helps you
I'm in trouble with a foreach that I need to do with Angular.
Thats's what I want to do :
<ul>
<div ng-repeat="g in groups">
<li ng-repeat="c in g.commands">{{c.text}}</li>
<li class="divider"></li>
</div>
</ul>
How can I do something like that, but in valid HTML structure ? (without a <div> between <ul> and <li>)
I see only one solution :
Replace the <div> with a <ul> and make a lot of css rules to make it like it doesn't exists
In addition, I use Angular 1.4.8.
Thanks !
You shouldn't have to alter your data structure at all. Instead just utilize the ng-repeat-start & ng-repeat-end directive. You'll have separate <ul>s but in terms of rendering, you can easily modify the CSS to make it appear to be a seamless list.
<ul ng-repeat-start="g in groups">
<li ng-repeat="c in g.commands">{{c.text}}</li>
<li ng-repeat-end class="divider"></li>
</ul>
http://codepen.io/jusopi/pen/KVZBLv
Probably the easiest way is to use a custom collection groupedCommands that is bound to the angular scope in code and contains the items in the correct order.
Then use ng-repeat-start for the enhanced repeat directive. There is a special ng-repeat-start and ng-repeat-end attribute combination that you can use for this case:
<ul>
<li ng-repeat-start="c in groupedCommands">{{c.text}}</li>
<li class="divider" ng-repeat-end></li>
</ul>
Try This one,
<ul>
<!-- ng-repeat: g in groups -->
<span ng-repeat="g in groups">
<li ng-repeat="c in g.commands">{{c.text}}</li>
<li class="divider"></li>
</span>
</ul>
This may solve your problem.
Caution : It is not a good way to use <span> between <ul> and <li>.