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.
Related
I have enabled ui-grid-selection on grid.As a result that when row is selected it will be get highlighted but my requirement is that i want to highlight the row only when the cell template button is clicked.Please let me know how to do this.
Code Sample
Finally was able to find a way to do that.Here is the answer.
What i did was,
In grid option changed enableRowSelection: false.
Add a function to cell template button.
Button Cell Template
<div><button class="btn btn-default" ng-click="grid.appScope.selectRow(row)">O</button></div>
Implement a function to select given row obj.
$scope.selectRow = function(row) {
row.setSelected(true);
};
if you want to unselect the selected row when the template button is clicked again you can use row.isSelectedthis will return boolean value.Here is the updated function code snippet.
$scope.selectRow = function(row) {
if(row.isSelected!=true){
//Select the row
row.setSelected(true)
}else{
row.setSelected(false)
}
};
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..
I'm using ngRepeat to generate four buttons. Whenever I click one of the buttons, I want to change its color and also execute a function (for now, I'm just using console.log for sake of simplicity). If I click on another button, I want to change its color while reverting the previous button back to its original color.
I have a couple of issues - the first is that I can't seem to get ng-click to accept two commands (the first being the console.log function and the second being the instruction to change the button color). The other issue is that if I take out the console.log function, I end up changing all of the buttons when I click on one.
Any ideas? Here's the plunkr: http://plnkr.co/edit/x1yLEGNOcBNfVw2BhbWA. You'll see the console.log works but the button changing doesn't work. Am I doing something wrong with this ng-click?
<span class="btn cal-btn btn-default" ng-class="{'activeButton':selectedButt === 'me'}" ng-click="log(element);selectedButt = 'me'" data-ng-repeat="element in array">{{element}}</span>
You can create a simple function in your controller which handles this logic:
$scope.selectButton = function(index) {
$scope.activeBtn = index;
}
Then, you can simply check in your template if the current button is active:
<span class="btn cal-btn btn-default" ng-class="{true:'activeButton'}[activeBtn == $index]" ng-click="selectButton($index);" ng-repeat="element in array">{{element}}</span>
I also changed your plunkr
You may convert your element list from string array to object array first.
$scope.array = [
{"name":"first", "checked":false},
{"name":"second", "checked":false},
{"name":"third", "checked":false},
{"name":"fourth", "checked":false}
];
And your log function need to change to:
$scope.log = function(element) {
console.log(element.name);
angular.forEach($scope.array, function(elem) {
elem.checked = false;
});
element.checked = !element.checked;
}
Then, in your HTML:
<button class="btn cal-btn"
ng-repeat="element in array"
ng-click="log(element)"
ng-class="{activeButton: element.checked, 'btn-default': !element.checked}"
>{{element.name}}</button>
Please see the updated plunker here.
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