I am using Angular X-Editable to allow users to edit list items in a ng-repeat.
I am using this approach: https://vitalets.github.io/angular-xeditable/#text-btn
However, I have been asked to modify this app so that the user can highlight a row in the repeat by clicking on it and click and edit button elsewhere that would put whichever row was selected into x-editable "edit mode".
Looking at their docs I see no method of doing this, nor the event that would put a row into edit mode. I can get the $index of the row clicked on in my ng-click handler but see no way to put that row into edit mode and capture the edits made.
My ng-repeat is like this so far, which is from the example linked above and shows a "pencil" button for editing that it. It works fine, but how to have all the items editable from one button on a toolbar or the like?
<div class="list-group-item" ng-repeat="level1 in pmt..level1 track by $index">
<button ng-click="textBtnForm.$show()" ng-hide="textBtnForm.$visible">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<span editable-text="level1.name" e-form="textBtnForm">
{{ level1.name || 'empty' }}
</span>
<i class="pull-right fa fa-angle-right fa-lg"></i>
</div>
Note: I know how to hide the buttons, or use a click on the text. The question is not eliminating he repeated buttons, but how to have one button to edit the focused row.
Related
im encountering a problem is i need to reload the page to see the Sub-category
When i click the arrow icon the Sub-category menu will appear like this
So i have tried like using the tag.openModal to display the subcategory when clicked
<div
v-for="(tag, i) in listItem.categories"
:key="i"
v-on:click="handleClickCategory(tag,i)"
>
<nuxt-link
:to="`/category/parentCate`"
:key="i"
>
<span class="tagDetail" #click="$emit('closeSideBar')">
{{ tag.name }}
</span>
</nuxt-link>
<span #click="onClickTag(tag, tag.subCates, tag.id)" v-if="tag.subCates.length"
<i class="fas fa-angle-down"></i>
</span>
<div v-if="tag.openModal">
<div v-for="(subCate) in tag.subCates" :key="subCate.id">
<nuxt-link :to="`/category/childCate`" class="subCateItem" >
{{subCate.name}}
</nuxt-link>
</div>
</div>
</div>
But only i tab-out will the component apprear.
So i have think of something like the v-model but clearly v-model doesnt support something like a div but rather than an input, dialog, or v-select.
How can i achieve what i want guys.
Thanks for reading
EDIT:
so when i say tab-out is that my list of category will be show if i click a button, my list of category will be appear like this
As you can see from my code is that if i click a category, i will emit an event to close this popup ( my list of category ). So after i have click it the popup will be close and when i click the button which call the popup this will happen
But still the thing is i want my subcategory to be shown when i click the arrow icon, not like this
I have a weird issue with Bootstrap Nav-tabs.
I put this button in the third tab that calls a JavaScript simple function that fills up a textarea within the same third tab
<button class="btn btn-success btn-s" onclick="seoRandom()">
<i class="fa fa-refresh"></i></button>
When I click that button, the function works fine but Nav-tab jumps to the first tab.
Any clue to prevent this?
I'm using mobile angular ui to open and close a sidebar. In this sidebar a user can search for persons and add or remove these from an array.
I have this repeat that shows the array of persons when clicking on the <a ...></> it closes the sidebar:
<li ng-repeat="recipient in persons.recipients">
<span class="wrapper">
<span class="imageWrap">
<span class="initials">
{{recipient.firstName.charAt(0)}}{{recipient.lastName.charAt(0)}} </span>
</span>
<i class="fa fa-trash-o" aria-hidden="true"></i>
<span class="details">
<span class="info">
{{recipient.firstName}} {{recipient.lastName}}
<span class="persnr">{{recipient.employeeID}}</span>
</span>
</span>
</span>
</li>
The above html snippet is from a directive that is in the sidebar.
The removeRecipient($index); function looks like this:
$scope.removeRecipient = function(index) {
$scope.persons.recipients.splice(index,1);
}
The function works but closes the sidebar and I can't figure out why it does this. So each time a user removes a recipient it has to swipe the sidebar open again. How do I keep this sidebar open?
References:
mobile angular ui: http://mobileangularui.com/docs/sidebars/
SOLUTION
I solved my problem by adding $event.stopPropagation(); in the ng-click right behind the removeRecipient($index); function.
From doc, there was one line.
You can put ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarLeft'
inside the sidebar to make it close after clicking links inside them.
so may be you can use that or you can use or you can do like below.
e.stopPropagation()
for that you need to pass $event in
<i class="fa fa-trash-o" aria-hidden="true"></i>
so in code, you can write.
$scope.removeRecipient = function(index,e) {
if(e){
e.stopPropagation()
}
$scope.persons.recipients.splice(index,1);
}
I didn't used same tool, but may be this is issue.
bit of a variation on a question I've asked before but the issue is this. We want to show a cart dropdown on the click of an 'add to cart' button. The issue is that knockout and jquery don't seem to be playing nice together with the click dispatch because when you click the button, something seems to prevent the drop down from showing. I am sure I am doing something wrong. Here's the code. I've spent way too much time on this and about to throw my computer :). It works if you just do the event on the console (of course).
HTML for the button and cart that needs to be shown
Add to Cart
More Info
<li id="cart-nav" class="nav-menu cart">
<a class="first" href="#">
Cart (<span data-bind="text:cartTotalItems">19</span>)
<div class="caret">
<i class="fa fa-caret-right"></i>
<i class="fa fa-caret-down"></i>
</a>
</li>
JS
self.addProductToCart = function(data, event) {
var $productNotification = $(event.target).prev().children('.product-notification');
ax.Cart.addCartItem({product_id:data.id, name:data.name, description:data.description});
self.openCartMenu();
$productNotification.addClass('rise');
$productNotification.on('animationend',function() {
$(this).removeClass('rise');
});};
self.openCartMenu = function () {
$('#cart-nav').find('a.first').click();};
I am working with bootstrap and I found a really good looking admin template. This template offers the possibility to show specific notifications at the main navigation. If I click on the notification icon, a small popup appears where I can see the notification.
You can see it here:
So I entered the green checkboxes on the left and if a user clicks on a checkbox, the notification is marked as read and dissapears from the notification panel. So far so good my problem is that I solved this solution with PHP and the complete page reloads once I click on the green checkbox. I am now looking for a jQuery solution, so that the page does not need to reload itself once the green checkbox is checked. So if a user clicks on the green checkbox, the notification should disappear without reloading the page.
My current code is:
<?php
<ul class='dropdown-menu dropdown-navbar'>
<li>
<a href='./index.php?func=showsms&id=".$msg["id"][$x]."&sid=$sid' target='_blank' class='clearfix'>
<div class='col-sm-3'>
<span class='msg-time'>
<a class='btn btn-success btn-xs' href='./index.php?func=$func&read_sms=".$msg["id"][$x]."&sid=$sid' role='button'><i class='ace-icon fa fa-check bigger-110 icon-only'></i></a>
</span>
</span>\
</div>
<div class='col-sm-9'>
<a href='#messagebox_".$msg["id"][$x]."' role='button' class='green' data-toggle='modal'>
<span class='msg-body'>
<span class='msg-title'>
<span class='blue'>".$sender["firstname"][0]." ".$sender["lastname"][0].":</span>
$msg["smstitle"][$x]
</span>
<span class='msg-time'>
<i class='ace-icon fa fa-clock-o'></i>
<span>".date("d.m.Y H:i",$msg["time_created"][$x])."</span>
</span>
</a>
</div>
</li>
</ul>
?>
Can someone tell me how I need to change the code so that I have the same solution with jQuery effect? I am not good at coding with jQuery. Would be awesome if someone can help me and tell me what my code should look like.
Thanks,
Chris
What you have written is HTML and not PHP code! I believe there should be a class for changing it to a different colour (read notification). So, what you need to do is:
$(".dropdown-menu dropdown-navbar li a").click(function () {
$(this).closest("li").addClass("read");
// The above code will make the presentation look read.
// Now make it really read:
$.post("notification.php", {id: the_post_id, action: read});
return false;
});
Note: I didn't prevent the default action of following the link, because when you follow the link, it will trigger the read action right?
And I hope in PHP, when you render the HTML, you would do:
<li class="otherClass newClass type <?php if ($isRead) echo "read"; ?>">