Try to add active class to menu item without using templates and it works. But when I try to add menu with template it breaks.
This code I use for li :
ng-click="select($index)"
ng-class="{sel: $index === selectedIndex}"
And in controller:
$scope.selectedIndex = 0;
$scope.select = function(i) {
$scope.selectedIndex = i;
};
http://plnkr.co/edit/SqHGhm?p=preview
Here's a working plunkr : http://plnkr.co/edit/wVW1F5HFUgXeaDi3kFyR?p=preview
Edited a few things :
Changed the sub-template to display the right name for the sub menu
Changed the ng-click instruction to assign to change the selected index
TODO :
Remove the selected class from the previously selected index
Related
View:
<a ng-repeat="control in controls | filter:name" ng-href="#{{control.id}}" ng-click="restart(control.name)" ng-class="{active: control.name == selected}">{{control.name}}
controller- app.js
$scope.restart = function (controlName) {
$scope.selected = controlName;
}
Here i have added the active class while clicking.how can i add the hover class using mouseover and remover the class using mouse-leave.
As suggested above, use ng-class with ng-mouseover and ng-mouseleave:
<div ng-class="class" ng-click="class='active'" ng-mouseover="class='hovering'" ng-mouseleave="class=''"></div>
This way, you'll have 3 event listener to a single variable (in a mutually exclusive way).
If you want to have both at the same time, use an array this way:
<div ng-class="[classClick, classHover]" ng-click="classClick='active'" ng-mouseover="classhover='hovering'" ng-mouseleave="classHover=''"></div>
Use ng-class, ng-mouseover anf ng-mouseleave:
<div ng-class='{"classtoadd": add, "active": click, "hover": hover}' ng-mouseover="add=true;" ng-mouseleave="add=false" ng-click="click = true" ng-mouseover="hover = true"></div>
Thanks for your response. i want to add 'active' class while clicking.and i want add the add the class' hover' while 'hovering'
I have been trying to addClass through AngularJS and the code doesn't seem to work, weird thing is addClass is working on Parent Menu Item but doesn't work on Sub item.
I have a nested UL and LI, when I click on the Parent LI ParentLi function gets called and it adds a "focused" class to the Clicked LI, this works fine but when I click on Nested LI's I call childLi and I do the same operation as done for the Parent but class doesn't get added. I am new to Angular and I hope I am doing this in the right way.
$scope.parentLi = function(event) {
var liElement = angular.element(event.target.parentNode);
var allParentLiElements = document.getElementsByClassName('parent-dropdown');
if (!liElement.hasClass('focused')) {
angular.element(allParentLiElements).removeClass('focused');
liElement.addClass('focused');
} else
liElement.removeClass('focused');
};
$scope.childLi = function(event){
var liElement = angular.element(event.target.parentNode);
var allParentLiElements = document.getElementsByClassName('child-dropdown');
if(!liElement.hasClass('focused')){
angular.element(allParentLiElements).removeClass('focused');
$(event.target).closest('.parent-dropdown').addClass('focused');
liElement.addClass('focused');
} else
liElement.removeClass('focused');
}
Note that i have edited my jsfiddle code based on the answer given by Jiam30.
adding focused class should work like active class i.e the menu that i just clicked should have focused class other should not, same way if i have hover on menu item and click on subitem, both the subitem and the parent item should have focused class.
Fiddle
Manipulating elements in a controller should be avoided.
Use ng-class instead (also use ng-repeat to avoid HTML repetition). For instance:
<li class="dropdown parent-dropdown" ng-click="parentLi()" ng-class="{'focused': isDropdownFocused}"></li>
With this function in the controller:
$scope.parentLi = function() {
$scope.isDropdownFocused = !$scope.isDropdownFocused;
};
Updated Fiddle: http://jsfiddle.net/6be56/127/
I need to do app,which doing something like that:
One web page separated on 2 tabs.
In first tab we have list of items. If you click on item it should be transferred to another tab and should be hidden on first tab.
Tools to do this thing is AngularJS.
Any ideas about that? Sorry for this question. I'm noobie in AngularJS.
Here's a really basic example of how you could implement your idea with AngularJS:
Tabs
one easy way to create tabs is to create the markup and use your controller to hold a reference to which tab to show:
// in the controller
$scope.currentTab = 1;
// in the markup
<li class="tab" ng-show="currentTab === 1">
... tab contents
</li>
... repeat for as many tabs as you want
you could then change the tab inside an ng-click directive in your page markup:
// in the markup
<a ng-click="currentTab = 1">change to tab 1</a>
Items
to show items in your tab first create the items in your controller:
// in the controller
$scope.tab1Items = [1, 2, 3, 4, 5];
then display in your tab:
// in the markup
<li class="tab">
<div ng-repeat="item in tab1Items">{{ item }}</div>
...
</li>
Moving the items
This can be done with a function in ng-click that passes the item from one array of items to another:
// in the controller
$scope.moveItem = function(item) {
if ($scope.tab1Items.indexOf(item) > -1) {
$scope.tab1Items.splice($scope.tab1Items.indexOf(item), 1);
$scope.tab2Items.push(item);
}
else {
$scope.tab2Items.splice($scope.tab2Items.indexOf(item), 1);
$scope.tab1Items.push(item);
}
}
// in the markup
<div ng-repeat="item in tab1items" ng-click="moveItem(item)">
...
The concept here is to create a page with one controller that maintains current tab state, as well as the items to display in those tabs. Since you have access to all the items in the same scope it's easy to manipulate and pass those items from one tab to another.
Here's a link to a basic working example in plnkr: http://plnkr.co/edit/PjSXI0JH4uQ1OW8u3f2z?p=preview
I want to display the data in a div element and highlight the default one as selected when the page is loaded, and when I click the other item which is not selected, the selected item should change the value for this .$scope.selectedItem property.
for e.g. I have this data
Item 1
Item 2
//this is the item list
this.$scope.items = items;
//this is the selected item
this.$scope.selectedItem = selectedItem;
//html. I don't know how to design this, since I don't know how to bind the data to div element.
<div></div>
if I have a div element, how can I bind the data and display it. And from there, how I can save the selected value when I select an item?
Sorry I am new to Angular.js So I'm confused at the moment.
You could have ng-click on the div itself.. something like this:
<div ng-click="clicked('one')">
Item One
</div>
<div ng-click="clicked('two')">
Item Two
</div>
In controller:
$scope.clicked = function(item) {
$scope.selectedItem = item;
};
you can use ng-class to decorate the div to have hilight..
If I have 2 divs (removed ng-click function for simplicity)
<div ng-class="{selected: header.type == 'percent'}" data-type="percent"></div>
<div ng-class="{selected: header.type == 'invisible'}" data-type="invisible"></div>
This will apply the class of .selected to one of the divs, depending on the value of $scope.header.type
However, I also have it so when I click on the div that does not have the .selected class, i remove the selected class from the div that had it, and apply it to the div that was just clicked.
Now, on the controller, how do I get the data-type of the div that has the .selected class?
Basically I'm trying to set $scope.header.type to hold the value of data-type of the div that has the .selected class
Just in case it's needed, here's the ng-click fn (which is not angular-like, but I couldn't find an alternative)
$scope.changeOfferbox = function($event) {
var selected = angular.element(document.querySelector('.selected'))
selected.removeClass('selected')
var clicked = angular.element($event.target).addClass('selected')
}
A simple solution might be to pass the data-type to your click function ; this way, you actually don't even need to manually add/remove classes, the ng-class directives will automatically update when header.type changes :
$scope.changeOfferbox = function($event, localType) {
if (localType !== $scope.header.type) {
$scope.header.type = localType;
}
};
<div ng-class="{selected: header.type == 'invisible'}" ng-click="changeOfferbox('invisible');" data-type="invisible"></div>