I have a custom dropdown like the one below which I use in a form to create roles. The purpose of the dropdown is to select a css-class to associate with a role. The name of the css-classes are role0, role1, role2.... role9
<ul class="dropdown-menu dropdown-select">
<li ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]">
<a href="#"><input type="radio" ng-model="roleCss" value="role{{$index}}" name="d-s-r">
<span class="label role{{$index}}"> </span>
</a>
</li>
</ul>
how do I bind the value of roleCss, so it saves the correct value (eg. role1) ?
Thanks
Thomas
You pretty much have it correct. The only problem is that ng-repeat creates its own scope, so the roleCss you are saving into is in that scope, not your controllers scope. All you need to do is add $parent like this.
<ul class="dropdown-menu dropdown-select">
<li ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]">
<a href="#"><input type="radio" ng-model="$parent.roleCss" value="role{{$index}}" name="d-s-r">
<span class="label role{{$index}}"> </span>
</a>
</li>
</ul>
Related
I have created one custom directive to add active class for clicked li in menu list based on url.
.directive('addActive', [function() {
return{
...
link : function(scope, element, attrs){
pageUrl = location.pathname;
$('#sidebar-left .nav li.active').removeClass("active");
if (pageUrl) {
debugger
console.log($('.nav li:has(a[href="' + pageUrl + '"])'))
$('.nav li:has(a[href="' + pageUrl + '"])').addClass("active");
}
}
}
}]);
directive code defines that when a menu is clicked, active class should be added for current url.
how can I use this directive in html code?
Html:
<div id="sidebar-left" class="col-xs-2 col-sm-2">
<ul class="nav main-menu">
<li class="dropdown ng-scope" ng-repeat="parent in menu">
<a href="/employee/Home" class="dropdown-toggle" ng-click="tabName(parent.name)">
<i class="fa fa-home"></i>
<span class="hidden-xs ng-binding">Home</span>
</a>
</li>
<li class="dropdown ng-scope" ng-repeat="parent in menu">
<a href="/documents/doc_details" class="dropdown-toggle" ng-click="tabName(parent.name)">
<i class="fa fa-file-text"></i>
<span class="hidden-xs ng-binding">Documents</span>
</a>
</li>
<li class="dropdown ng-scope" ng-repeat="parent in menu">
<a href="#" class="dropdown-toggle" ng-click="tabName(parent.name)">
<i class="fa fa-money"></i>
<span class="hidden-xs ng-binding">Pay & Benifits</span>
</a>
<ul class="dropdown-menu">
<li ng-repeat="child in parent.children" class="ng-scope">
slips
</li>
</ul>
</li>
</ul>
</div>
Please guys any help?
you are missing the most important information about your directive: the 'restrict' attribute indicates how should the directive can be used in your html. For instance: using retrict: 'E', means that your directive can be used as an html element
<add-active></add-active>
But i guess that in you situation, your restrict value is 'A', and you should use it as an attribute:
<div add-active></div>
for more info you can see the angularJS directive's documentation here:
https://docs.angularjs.org/guide/directive
but i agree with the folks above me that in this case, you probably just need to use ng-class (that is also a directive).
I think Yaniv's answer is what you need.
But I suggest you try ng-class.
In your code, you are trying to use the url so I think this might help you:
How to highlight a current menu item?
I have a sidebar with toggle menus of companies. I get the companies data from api and print it out. And each company has same two subtitle "documents" and "add new document".
I use ng-repeat for printing all the companies to sidebar. And i couldn't find any solution to toggle these menus.
Last thing i found is this:
<li data-ng-click="toggleMenu($event)" ng-repeat="company in companies" >
<a class="nav-submenu" data-toggle="nav-submenu" href="#">
<span class="sidebar-mini-hide">{{company.name}}</span>
</a>
<ul>
<li>
<a data-ui-sref="{{company.id}}" data-ui-sref-active="active">
<i class="fa fa-file-text-o"></i>Company's Documents
</a>
</li>
<li>
<a data-ui-sref="{{company.id}}" data-ui-sref-active="active">
<i class="fa fa-plus"></i>Add New Document
</a>
</li>
</ul>
</li>
Here is the Js Code:
$scope.toggleMenu = function($event){
$($event.currentTarget).toggleClass('open');
$($event.currentTarget).siblings().removeClass('open');
};
But this code causes menu to close whenever i click on the "add new document" or "documents" of any company.
Any help would be great for me !
Thanks,
Burak
As I wrote in the comment: You should avoid as much as possible uglifying your angular code with jQuery.
I suggested the following as an alternative:
<li ng-class="{open: company.isOpen}" ng-repeat="company in companies" >
<a ng-click="company.isOpen = !company.isOpen" class="nav-submenu" data-toggle="nav-submenu" href="#">
<span class="sidebar-mini-hide">{{company.name}}</span>
</a>
But as you correctly say, it won't close to menu if you're clicking on another company menu.
So here is a similar, but different approach:
<li ng-class="{open: currentOpen.companyId == company.id}" ng-repeat="company in companies" >
<a ng-click="currentOpen.companyId = currentOpen.companyId == company.id ? null : company.id" class="nav-submenu" data-toggle="nav-submenu" href="#">
<span class="sidebar-mini-hide">{{company.name}}</span>
</a>
This will store the company id when you click on it in an object: $scope.currentOpen.companyId, and will add the open class if it matched to the same company id inside the ngRepeat loop.
Working example: https://jsfiddle.net/jsv2q4bm/
(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 an ng-reapeat loop which shows a list of flights. I want to set an .active class for the flight date originally searched for. This .active class would need to go on the <li> element but I can't put it on every <li> element.
Anyone got any ideas?
Here's my html code so far:
<div data-ng-if="cheapestFlights.length>0" class="u-filter-container">
<ul class="u-filters-list">
<li data-ng-repeat="flight in cheapestFlights" class="u-filters-list-item">
<span data-ng-click="$parent.selectedCheapestFlight = flight" data-ng-class="{selected:$parent.selectedCheapestFlight==flight}">
<span class="u-filters-list-text u-dates" data-ng-bind="flight.DepartureDateString" ng-click="filterLowestFlight(flight.DepartureDateString)" ng-model="flight.DepartureDateString" ng-init="filterLowestFlight()"></span>
<span class="u-filters-list-text u-prices">{{flight.Price | currency : "£"}}</span>
</span>
</li>
</ul>
</div>
Thank you in advance.
You should use data-ng-class="{'active': searchDate == flight.date }"
Add ng-model to the input where the date is being searched and add ng-class on your "li" element when those values are equal:
<div class="flightDate">
<input ng-model="flightDate" type="text">
</div>
<div data-ng-if="cheapestFlights.length>0" class="u-filter-container" ng-class="{'active': flight.DepartureDateString == flightDate}">
<ul class="u-filters-list">
<li data-ng-repeat="flight in cheapestFlights" class="u-filters-list-item">
<span data-ng-click="$parent.selectedCheapestFlight = flight" data-ng-class="{selected:$parent.selectedCheapestFlight==flight}">
<span class="u-filters-list-text u-dates" data-ng-bind="flight.DepartureDateString" ng-click="filterLowestFlight(flight.DepartureDateString)" ng-model="flight.DepartureDateString" ng-init="filterLowestFlight()"></span>
<span class="u-filters-list-text u-prices">{{flight.Price | currency : "£"}}</span>
</span>
</li>
</ul>
</div>
I'm building a twitter bootstrap list using angular's ng-repeat:
<ul class="dropdown dropdown-menu">
<li class="menuOption" ng-repeat="option in options">
<a data-ng-click="option.value>0 ? foo() : goo()">
{{option.label}}
</a>
</li>
</ul>
Now, I want to include a divider (<li class="divider"></li>) inside this list. It should be before the last element in the list (which is also indicated by option.value with a negative value, which is probably an easier indication).
My problem is that since the ng-repeat iteration is on the li element itself, I couldn't find a way to use ng-if on this element.
Try ng-repeat-start and ng-repeat-end:
<ul class="dropdown dropdown-menu">
<li class="menuOption" ng-repeat-start="option in options" ng-if="option.value>0">
<a data-ng-click="option.value>0 ? foo() : goo()">
{{option.value}}
</a>
</li>
<li class="divider" ng-repeat-end ng-if="option.value<0">
option < 0 ({{option.value}})
</li>
</ul>
DEMO