I'm using foundation drop-down
You can have a look at it here:
http://foundation.zurb.com/docs/components/dropdown.html#
I've created a dropdown with the following code
<a href="#" data-dropdown="drop1" >Date Range </a>
<ul id="drop1" class="f-dropdown large date-menu" drop-down-content>
<li id="custom">Custom</li>
<li id="today">Today</li>
<li id="yesterday">Yesterday</li>
<li id="sundaytoToday">This Week(Sun-Today)</li>
<li id="montoToday">This Week(Mon-Today)</li>
</ul>
I want to get the value/id of the selected element
I've tried like below, but it's not working
'click #drop1 li':"changeDateRange",
changeDateRange : function(event)
{
var ss=$(this).attr('id');
console.log(ss);
if(ss=="custom")
{
console.log("custom if");
}
},
Try this:
...
var ss = event.currentTarget.id
...
So in backbone, the "this" for the delegate events are bound to the class itself. So you would have to use "event.currentTarget"
'click #drop1 li':"changeDateRange",
changeDateRange : function(event)
{
var ss=$(event.currentTarget).attr('id');
console.log(ss);
if(ss=="custom")
{
console.log("custom if");
}
},
Related
In this very site I've seen this question many times, but none of them works for me because of two things: I need the div to toggle when clicking the "options" button, but also to hide when clicking outside of the div; and I need it to work with dirPagination.
I saw this answer, it works fine but with one problem I just can't solve: it shows ALL the hidden divs at the same time, instead of only showing the one I clicked.
Here's my code:
<body ng-controller="MainCtrl">
<!-- pagination -->
<dir-pagination-controls
max-size="7"
direction-links="true"
boundary-links="true">
</dir-pagination-controls>
<ul>
<li dir-paginate="report in reports | itemsPerPage:4">
Options
<h3>{{report.Title}}</h3>
<div class="options" ng-show="dp">
<p>These are some options</p>
</div>
</li>
</ul>
</body>
And the JS to show the options:
//options div
$scope.showOptions = function(event){
if($scope.dp === false || $scope.dp === undefined) {
$scope.dp = true;
event.stopPropagation();
} else {
$scope.dp = false;
}
};
window.onclick = function(){
if($scope.dp){
$scope.dp = false;
$scope.$apply();
}
};
I've made a Plunker in case you wanna se it in action: my Plunker link
Can somebody help me with this issue? :(
Add a new boolean property on your reports array , for example show
var reports = [
{
"ID":1,
"Title":"Report 1",
"Show":false
},
{
"ID":2,
"Title":"Report 2",
"Show":false
}
]
Apply the property in to ng-show and also pass the current report scope object in to showOptions method to write the logic for hide and show.
<li dir-paginate="report in reports | itemsPerPage:4">
Options
<h3>{{report.Title}}</h3>
<div class="options" ng-show="report.Show">
<p>These are some options</p>
</div>
</li>
$scope.showOptions = function(event,report){
report.Show=!report.Show;
/*you can iterate through each reports and change show to false if the clicked report id not equal to report id , Angular JS will automatically update the scope in to the view*/
reports.forEach(function(item, index) {
if (item.ID !== report.ID) {
item.Show = false;
}
});
if($scope.dp === false || $scope.dp === undefined) {
$scope.dp = true;
event.stopPropagation();
} else {
$scope.dp = false;
}
};
https://next.plnkr.co/edit/hnhWMrgR3GMtVcES
You need to use a separate variable for each div you want to show. You could add the dp attribute to the report. There is no need to loop over the reports to hide them. You can just keep track of the currently visible report and hide it when another one is toggled.
Here is the relevant HTML:
<li dir-paginate="report in reports | itemsPerPage:4">
Options
<h3>{{report.Title}}</h3>
<div class="options" ng-show="report.dp">
<p>These are some options</p>
</div>
</li>
and JavaScript
var visibleReport;
$scope.showOptions = function(event, report){
if (report == visibleReport) {
report.dp = !report.dp;
}
else {
if (visibleReport) visibleReport.dp = false;
report.dp = true;
}
visibleReport = report
event.stopPropagation();
};
window.onclick = function(){
if (visibleReport) visibleReport.dp = false;
visibleReport = null;
$scope.$apply();
};
Here is a working plunker https://next.plnkr.co/edit/sWLxBGlF8D22nvYp?preview
In my webpage I have 2 languages English and Hindi. By default my page will be in English.
When I click on Hindi language I want to add active class to li which has hin id, and want to remove active class, which has eng id.
<li class="lang active" id="eng">
ENG
</li>
<li class="lang" id="hin">
HIN
</li>
Whenever I change language page gets refreshed. I need these changes once page is refreshed
myfunc = function(item) {
$scope.selectedlang = item;
var test = {value: item, displayValue: ''};
c.server.get(test).then(function() {
$window.location.reload();
})
I tried like this.
<li ng-class="{'active':selectedTab === 'eng'}" ng-click="selectedTab = 'eng'">
english
</li>
<li ng-class="{'active':selectedTab === 'hin'}" ng-click="selectedTab = 'hin'">
hindi
</li>
But these changes are not appearing after a page refresh.
How can I toggle classes using AngularJS?
try this
<li ng-class="{'active':location.hash == '#eng'}"><a href="#eng" >english</a>
</li>
<li ng-class="{'active':location.hash == '#hin'}"><a href="#hin" >hindi</a>
</li>
or
<li ng-class="{'active':location.hash == '#eng'}" id="eng">
ENG
</li>
<li ng-class="{'active':location.hash == '#hin'}" id="hin">
HIN
</li>
myfunc = function(item) {
location.hash = item;
$scope.selectedlang = item;
var test = {value: item, displayValue: ''};
c.server.get(test).then(function() {
$window.location.reload();
})
Store selectedTab value in local storage than refresh page. Once the page is reloaded get value from local storage and assign to selectedlang.
myfunc = function (item) {
$scope.selectedlang = item;
$window.localStorage.setItem('lang', item);
var test = {
value: item,
displayValue: ''
};
c.server.get(test).then(function () {
$window.location.reload();
});
}
// On page load
$scope.selectedlang = $window.localStorage.getItem('lang') || 'eng';
Here the problem is,Whenever page is refreshed then language is set to default language 'eng'.So try to store language value in localstorage and then apply ng-class.
<li ng-class="{'active':selectedTab == 'eng'}" ng-click="selectedTab('en')">
english
</li>
<li ng-class="{'active':selectedTab == 'hin'}" ng-click="selectedTab('hin')">
hindi
</li>
selectedTab= function(item) {
localStorage.setItem("selectedTab",item);
})
Then get this locastorage value on page refersh method.
Hope this helps:)
You can Add the class using ng-class, like this.
ng-class="{active: $index == selected}"
Here, .active is added to class list on the condition $index == selected
and to remove the .active from the list, reset the selected by
$scope.selected = -1
I am new to angularjs and was implementing a menu framework which would be both vertical & horizontal depending on a button toggle.The menu being implemented is with custom directives which looks like below.
<my-menu>
<my-menu-item></my-menu-item>
<my-menu-group label="Fruits">
<my-menu-item label="Apple"></my-menu-item>
<my-menu-item label="Orange"></my-menu-item>
</my-menu-group>
<my-menu-group label="Vegetables">
<my-menu-item label="Tomato"></my-menu-item>
<my-menu-item label="Beans"></my-menu-item>
</my-menu-group>
<my-menu>
The template for the <my-menu-group> is:
<li class="my-selectable-item" ng-click="clickedMenuGroupItem()" ng-class="{'my-item-horizontal': !isVertical()}">
<div class="acc-noselect">
<i class="fa {{icon}} my-menu-icon"></i>
{{label}}
<i ng-if="isVertical()"
class="fa fa-angle-right my-group-indicator-left" ng-class="{'fa-rotate-90':isOpen}"></i>
<i ng-if="!isVertical()" style="margin-left:5px;"
class="fa fa-angle-down" ng-class="{'fa-rotate-180':isOpen}"></i>
</div>
The link function has the code snippet as :
link: function(scope,el,attr,ctrl) {
scope.isOpen = false;
scope.closeMenu = function () {
scope.isOpen = false;
};
scope.clickedMenuGroupItem = function () {
scope.isOpen = !scope.isOpen;
if (el.parents('.my-subitem-section').length === 0)
scope.setSubmenuPosition();
ctrl.setOpenMenuScope(scope);
};
scope.isVertical = function() {
return ctrl.isVertical() || el.parents('.my-subitem-section').length > 0;
};
scope.setSubmenuPosition = function(){
var pos = el.offset();
$('.my-subitem-section').css({'left':pos.left + 20, 'top' : 40});
};
}
Vertical menu works just fine.However when the menu is horizontal if I click on 'Fruits' I get the respective list values and then when i click on vegetables both the list gets rendered.What I'm expecting is a toggle functionality.The bottom line here is that I m not able to control the scope of previously clicked element in the link function.
I've tried my best to be as descriptive as possible here.Please help ?
Let say I have a very simple data that Im looping through with ng-repeat.
Now, how can I highlight (add a css class) to a highest value in the data.
Data:
$scope.marks = [
{point:'11'},
{point:'2'},
{point:'23'}
];
html:
<ul>
<li ng-repeat="value in marks" class={{here add class for value 23}}> //how to add class to li with max value, in this case it is 23
{{ value.point}}
</li>
</ul>
Many thanks for your help
PLUNKR
You can use calculate the max value in a watch:
$scope.$watchCollection('marks', function(items) {
$scope.maxPoint = -1; // assuming we won't have negative values
angular.forEach(items, function(item) {
if (parseInt(item.point) > $scope.maxPoint) {
$scope.maxPoint = item.point;
}
});
});
Then use ngClass directive in your markup:
<li ng-repeat="value in marks" ng-class="{max : value.point == maxPoint}">
{{ value.point}}
</li>
Like Petr pointed out this won't perform well. Calculating the max value on changes is a better way. Here's a working plunk : http://plnkr.co/edit/F8yjoWR0ZWVF4tcck1rH?p=preview
I am looking for a way to check for each movie if the movie has the category which is selected. Movies is an array which contains objects, those objects have some properties, like you can see in the code below. The categories property is a array of categories where the movie is in. Now there is a variable selectedCategories where the current selected category is stored in.
I don't want to use custom filters, because I think it has te be possible with this one, I just can't quite get it. In the javascript function there can't be changed too much either.
If the return of hasSelectedCategory is true, then it has to execute the block, if false not.
Thanks in advance.
//in the javascript file
scope.hasSelectedCategory = function(categories){
var hasCategory = false;
if (categories.indexOf(scope.selectedCategory) !== -1){
hasCategory = true;
}
return hasCategory;
};
//in the html file
<div class="movieListItem {{listItemView}}" ng-repeat="movie in movies | filter:{hasSelectedCategory(categories): true}">
<h4>{{movie.title}}</h4>
<a href="http://www.youtube.com/embed/{{movie.youtubeId}}?rel=0&autoplay=1">
<img ng-src="{{findPosterSource(movie)}}" class="poster"> </a>
<p ng-hide="listItemView === 'grid'">
{{movie.description}}
</p>
<div class="categories" >
<span ng-repeat="category in movie.categories"> <a ng-href="#">{{category}}</a> </span>
</div>
</div>
You have to use the filter like this:
ng-repeat="movie in movies | filter:hasSelectedCategory"
The hasSelectedCategory function will be invoked for each movie in the movies list. In order to filter by selected categories you can use a function like this:
$scope.hasSelectedCategory = function(movie) {
var hasCategory = false;
angular.forEach($scope.selectedCategories, function(selectedCategory) {
if (!hasCategory && movie.categories.indexOf(selectedCategory) !== -1) {
hasCategory = true;
}
});
return hasCategory;
};
Demo (plunker)