I'm trying to get a bootstrap dropdown working. I have attempted to pretty much exactly follow the code at The Angular UI page. It's not working.
I have a Plunker here. Here's the code that's not working:
<table>
<tr>
<td align="center" class="give-store-button-group dropdown">
<a href class="dropdown-toggle" dropdown-toggle="">{{backslaps[current].store}}</a>
<ul class="dropdown-menu">
<li ng-repeat="store in backslaps">
<a href>{{store.store}}</a>
</li>
</ul>
</td>
</tr>
</table>
Thank you for any help.
You need to put a container containing dropdown attribute directive.
<span class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle="">{{backslaps[current].store}}</a>
<ul class="dropdown-menu"> .... </ul>
</span>
Check this updated plunker
Related
The below code renders tabs, sections under each tab and the content of the section. When navigating from one section to another, I notice the number of watchers are increasing (or) adding up each time.
Can any one tell what could be the reason for this. Appreciate any pointers
<ul class="nav nav-tabs">
<li ng-repeat="tab in tabList track by tab.tabId" id="{{tab.attribute}}"
ng-class="{active:selectedTab.attribute === '{{tab.attribute}}'}">
<a showtab="" href="#{{tab.attribute}}" ng-click="setSelectedTab(tab)">{{tab.displayLabel}}</a>
</li>
</ul>
<div class="tab-pane">
<div class="" ng-if="selectedTab.sectionList.length > 0">
<ul class="nav nav-pills pills-section">
<li ng-repeat="section in selectedTab.sectionList track by section.sectionId" id="{{section.attribute}}" ng-class="{active:selectedSection.attribute === '{{section.attribute}}'}">
<a showtab="" href="#{{section.attribute}}" ng-click="setSelectedSection(section)">{{section.displayLabel}}</a>
</li>
</ul>
<!-- Content of the section rendered with ng-repeat -->
<div ng-include="sectionContent"/>
</div>
</div>
The section content has the below mark up
<table>
<tbody>
<tr ng-repeat="field in selectedSection.fields track by field.fieldId">
</tr>
</tbody>
</table>
I have had similar problems before, nesting ng-repeats is never a good idea, but we are forced from time to time to do it. This is your solution to have performance benefits.
http://kamilkp.github.io/angular-vs-repeat/
So heres what the html looks like in the text editor...
<div ng-repeat="x in Result">
<a ng-href="https://domain.com/{{x.short_url}}">
<li class="viewer" id="{{x.user_id}}" style="background-image: url(https://domain.com/{{x.user_id}})">
</a>
</div>
But when its rendered in the browser it looks like this...
<a ng-href="https://domain.com/ucmzda" href="https://domain.com/ucmzda"></a>
<li class="viewer" id="b5599b09bcb3467ba3ade4e5b30721a4" style="background-image: url(https://domain.com/image/user/b5599b09bcb3467ba3ade4e5b30721a4)">
I cant figure out why the list item is not rendering inside the anchor?
<div ng-repeat="x in Result">
<a ng-href="https://domain.com/{{x.short_url}}">
<li class="viewer" id="{{x.user_id}}" style="background-image: url(https://domain.com/{{x.user_id}})"><li>
</a>
</div>
refer:
ng-repeat inserting empty anchor tags
In your case li is not closed:
It is not a good practies to use li inside a tag:
use like this
<ul ng-repeat="x in Result">
<li class="viewer" id="{{x.user_id}}" style="background-image: url(https://domain.com/{{x.user_id}})"><a ng-href="https://domain.com/{{x.short_url}}">
</a>
</li>
</ul>
Have you by any chance configured your $locationProvider to html5Mode? If yes this would cause your problems. You could force it to always go to the url by adding target="_self" to your tag. Give it a shot.**
use HTML5 so adding the target="_self" it will work
http://plnkr.co/edit/xUuZyQTES83yccFRcc4K?p=preview
Check out my plunker that replicates my exact problem. I trimmed my code as much as I could.
I've also skimmed my code as much as I can.. and unfortunately I have not been able to find what is so significantly different between the first set of accordions and the second that is causing the first set to not work.
First set(not working):
<div ng-repeat="x in numOfMaps" class="{{x.count}}Details">
<li class="m2Details m3Details"><a data-toggle="collapse" dataTarget="#{{x.count}}toggleBuilding" href="#">Building<span class="caret"></span></a></li>
<ul id="{{x.count}}toggleBuilding" class="accordion-body {{x.buildingOpen}}">
<li ng-repeat="y in this[x.count + 'InfoBuilding']" class="{{y.linkclass}}"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</li>
</ul>
</div>
<div ng-repeat="x in numOfMaps" class="{{x.count}}Details">
<li class="m2Details m3Details m4Details"><a data-toggle="collapse" dataTarget="#{{x.count}}toggleOffsite" href="#">Offsite<span class="caret"></span></a></li>
<ul id="{{x.count}}toggleOffsite" class="accordion-body {{x.offsiteOpen}}">
<li ng-repeat="y in this[x.count + 'InfoOffsite']" class="{{y.linkclass}}"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</li>
</ul>
</div>
This code is wrapped in another ul tag and additional stuff within..but I doubt any of that is having an affect since it is all functioning fine otherwise but here is a skeleton replica:
<div>
<ul>
<li><img></li>
<li ng-repeat=""><a>{{text}}</a></li>
<li><a><span>Text</a></li>
///first set of code (above)
</ul>
</div>
Second set(working):
<ul ng-repeat="x in numOfMaps" class="buildingDropdown {{x.count}}Details {{locationsVisibility}}">
<a class="btn btn-primary btn-block" id="toggleHeader" data-toggle="collapse" data-target="#{{x.count}}LocationsList" href="#"><span>Locations</span><span class="caret"></span></a>
<ul id="{{x.count}}LocationsList" class="accordion-body collapse buildingListDropdown">
<a ng-repeat="y in this[x.count + 'InfoBuilding']" href="{{y.link}}" class="{{y.linkclass}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><li>{{y.name}}</li></a>
<a ng-repeat="y in this[x.count + 'InfoOffsite']" href="{{y.link}}" class="{{y.linkclass}}" ng-click="clickLinks(y.initialOut,y.initialIn,y.backIn,y.backOut,y.name)"><li>{{y.name}}</li></a>
</ul>
</ul>
Anyone care to take a look? It's probably something small and embarrassing, like a "DOH!" moment. Much appreciated. :)
You're right - it's something small!
You have accidentally camel cased some of the data-target attributes:
<li class="m2Details m3Details">
<a data-toggle="collapse" dataTarget="#{{x.count}}toggleBuilding" href="#">
Building
<span class="caret"></span>
</a>
</li>
Note dataTarget should be data-target.
(please do not update the english grammer in this question/ I wont be able to approve it and this question wont get resolved.)
This is my UI
It contains various li elements whose values are populated using this angular html
<div class="row">
<li class="no-bullet-li li-12 monaco-font"> {{selectedChangeEligibilityPlan}}</li>
<ul class="ul-plan-1">
<li class="no-bullet-li" ng-repeat="plan in fewThings">
<div ng-class="{ 'selected-class-name': $index == selectedIndex }" ng-click="itemClicked($index)" class="li-alt monaco-font"> p2|{{plan.planName}} | {{plan.planId}}
<a class="iconing-sub" ng-click="addClick(item)" href=""><i class="glyphicon glyphicon-plus"></i></a>
<a ng-click="deleteClick(item)" ng-class="{ active : active.one }" href=""><i class="glyphicon glyphicon-remove iconing_1-sub"></i></a>
</div>
<ul class="ul-plan">
<li class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
p1| {{ plan.planNames[$index]}} | {{item}}
<a <a ng-click="editClick(item)" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
<a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>
</li>
</ul>
</li>
</ul>
</div>
It uses the nested ng-repeat.
The whole UI is contained within a one controller ( no directives used)
the following code gets triggered when someone clicks the blue lis.
$scope.itemClicked = function ($index) {
console.log($index);
// console.log($(item).closest('li') );
$scope.selectedIndex = $index;
};
here's how to ui looks and its great.
problem arises when I try to do the same logic for the pink ones (nested ng-repeat li). It selects other pink lis in all the other stack too.
here's the screenshot.
second part of question:
I have I have the above UI plus I also have this second UI that is loaded along with this on the same page. It contains a bunch of horizontal rows.
Once the user click the blue pink colored lis it goes into the active state. Then the user can click the row which he likes. upon clicking it the plan name of currently selected li will get replaced.
Here is the html for it.
<div class="row">
<li class="no-bullet-li li-12 monaco-font"> {{selectedChangeEligibilityPlan}}</li>
<ul class="ul-plan-1">
<li class="no-bullet-li" ng-repeat="plan in fewThings">
<div class="li-alt monaco-font"> p2|{{plan.planName}} | {{plan.planId}}
<a class="iconing-sub" ng-click="addClick(item)" href=""><i class="glyphicon glyphicon-plus"></i></a>
<a ng-click="deleteClick(item)" ng-class="{ active : active.one }" href=""><i class="glyphicon glyphicon-remove iconing_1-sub"></i></a>
</div>
<ul class="ul-plan">
<li ng-class="{ 'selected-class-name': $index == selectedIndex }" ng-click="itemClicked($index)" class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
p1| {{ plan.planNames[$index]}} | {{item}}
<a ng-click="editClick(item)" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
<a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>
</li>
</ul>
</li>
</ul>
</div>
The problem lies in the fact that you are trying to save the state of the data (which one is selected) inside your controller using $index. The $index property isn't unique among different ng-repeats, so when you set your $scope.selectedIndex to $index, each of your sub lists will see that their $index matches, and so will each trigger the ng-class and add the selected-class-name class.
What you could do instead is have each item in the data have a unique index and use that id to store which item is selected in $scope.selectedIndex.
<ul class="ul-plan">
<li ng-class="{ 'selected-class-name': item.id == selectedIndex }" ng-click="itemClicked(item.id)" class="no-bullet-li li-8 monaco" ng-repeat="item in plan.planIds">
p1| {{ plan.planNames[$index]}} | {{item}}
<a ng-click="editClick(item)" href=""><i class="glyphicon glyphicon-pencil iconing"></i></a>
<a ng-click="deleteClick(item)" href=""><i class="glyphicon glyphicon-remove iconing_1"></i></a>
</li>
</ul>
This line looks strange.
<a ng-click="select('one')" href="">
Did you really mean to pass a hardcoded 'one' to the function? Or was it supposed to be the index, like the deleteClick() call.
I have some filters based on the Bootstrap 3 dropdown menu, but for some odd reason they do not work in the actual dropdown menu, but if i copy-paste it and place it outside it works fine.
<div ng-app="App" ng-controller="ExerciseCtrl" >
<div class="btn-group" ng-class="{open: open}">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="open=!open">Equipment <span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="equipment in equipments">
<a href ng-click="myFilter = {equipment:'{%verbatim%}{{equipment.name}}{%endverbatim%}'}">{%verbatim%}{{equipment.name}}{%endverbatim%}</a>
</li>
</ul>
</div>
<table class="table table-hover" >
<tr><td><strong>Name</strong></td><td><strong>Main muscle</strong></td><td><strong>Equipment</strong></td></tr>
<tr ng-repeat="exercise in exercises | filter:myFilter | orderBy:orderProp">
{%verbatim%}<td>{{exercise.name}}</td><td>{{exercise.main_muscle.name}}</td><td>{{exercise.equipment.name}}</td>{%endverbatim%}
</tr>
</table>
</div>
One menu item looks like following:
<li ng-repeat="equipment in equipments" class="ng-scope">
Dumbbell
</li>
So basically if i pull out the alink and place it before the table it works, but not inside the actual dropdown menu.
myFilter is being set on a child scope created by ng-repeat, and is not visible to your table. Try using an object property, such as my.filter, instead.
$scope.my = {
filter: ''
}
html:
<li ng-repeat="equipment in equipments">
<a href ng-click="my.filter = equipment.name">...</a>
</li>
...
<tr ng-repeat="exercise in exercises | filter:{ name: my.filter} ...
Here is a demo: http://plnkr.co/edit/ogfe7MxRRIovTG9bQCWN?p=preview