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..
Related
In ng-repeat I have a list of items and each item I have a Edit and delete icon like below,
Item1 (Edit) (Del)
Item2 (Edit) (Del)
Item3 (Edit) (Del)
Item4 (Edit) (Del)
When user click edit I changed content editable attribute to true and hide the Edit and delete options.
But when user click next Edit button or click outside I need to show to edit and delete options again.
Use ng-blur to detect when the element loses focus
Just store the state of your 'item' in item model. I believe, that yout items is just an array of json objects.
So you can do something like:
var vm = this;
vm.items = [...];
vm.onEdit = function(itemToEdit){
vm.items.forEach(function(item){
item.isEdit = item == itemToEdit;
});
}
And in a view:
<div ng-repeat="item in $ctrl.items">
<span>{{item.title}}</span>
<span ng-click="$ctrl.onEdit(item)"
ng-show="item.isEdit">Edit</span>
<span>Delete</span>
</div>
And about click outside part. You should use ng-blur, as #Leo mentioned, or
$document.on('click', function(){
vm.onEdit();
});
But! It'll fire on any click, so you should attach e.preventDefault() on every editable field click. The approach depends on situation. ng-blur is better.
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
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 have list of items and i want to create filter from button that shows\hides the element, instead of add\remove it from the DOM.
<li ng-repeat="li in list" ng-show="">
<a ng-click="">category</a>
</li>
i mean that instead of filtering list i want to hide\show list items by this filter.
i found this fiddle http://jsfiddle.net/cKa6K/
but i want to do the same only with hide\show.
Without more information on your code, I'd do something like that : http://jsfiddle.net/DotDotDot/tpmxN/1/
I used an item list with 2 properties, the name and a category
I defined a function for the ng-show, which will compare the item category to the filter
<li ng-repeat="li in list" ng-show="isDisplayed(li, filter)">
Then in the controller the function is defined by :
$scope.isDisplayed=function(item, filter){
if(filter!="")
{
if(item.category==filter)
return true;
return false;
}
return true;
}
Nothing really hard in this, then you just have to set the filter property, I used buttons with ng-click and the category in the ng-repeat, you can click on them, it will hide/show the proper items
I hope this helps
Have fun