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
Related
I have to get a dropdown menu and attach the router link to other component and one dialog component for dialog box in it.
<td align="center">
<v-btn round class="mx-2 dropdown-menu" fab small v-bind:style="displayClass(key[2])" v-bind:key="key[1]"
v-for="(key) in props.item[6]">
<div>
<!--option 1-->
<router-link :to="{ name : 'modifyinfo', params:{prip : key[0], Name : props.item[1], pripId : key[1]}}"> {{displaycase(key[0])}}
</router-link>
<!--option 2-->
<dialog :prip_name=props.item[1] :prip_info=key[0]>{{displaycase(key[0])}}</dialog>
</div>
</v-btn>
</td>
I need to get the router link and dialog as option in dropdown in the div. Kindly help.
I don't understand your question. You want to render the router-link and dialog component when the user hovers on the buttons? or click?
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.
Scenario:
I have an accordion.
When it expands I have a form. Sometimes a long form (bigger than page height).
The form action buttons are on the end of the form.
Problem:
You must scroll the page to see/click on the action button. For some particular reason, the user may want to save it even without see all the form.
Question:
How to fix the action button in the end of the screen?
How to keep these buttons inside the accordion item (if you scroll to the end of the page, you should see other accordion item siblings)
In other words: the action buttons should be attached to the end of the screen only while the end of that accordion item is not visible yet;
Edit
Demo: http://jsfiddle.net/1vkcmo7a/1/
<div>
<accordion close-others="true">
<accordion-group heading="Item #{{i}}" ng-repeat="i in [1,2,3,4,5]">
<ul>
<li ng-repeat="a in [1,2,3,4,5,6,7,8,9,10]">long form</li>
</ul>
<button class="btn btn-success">Save</button>
</accordion-group>
</accordion>
</div>
How about enclosing the accordion item contents in a div with fixed height and a scroll e.g. <div style="max-height:50px;height:50px; overflow:auto"> ?
See http://jsfiddle.net/1vkcmo7a/7/
I am new with angularjs and struggling to make some logic for Showing and hiding different Div's using ng-show and ng-hide based on different click.
PLUNKER
View 1:
<div ng-hide="section1">
<select>
<option>Select List 1</option>
<option>Select List 2</option>
</select>
</div>
<div ng-hide="section1">
<ul>
<li ng-repeat="name in names">{{name.item}}</li>
</ul>
<button type="button" ng-click="section1=!section1">Edit</button>
</div>
Initially it shows a Dropdown, some list Item and Edit button
Clicking on Edit button Everything hides and shows View 2
View 2:
<div ng-show="section1">
<button type="button" ng-click="section2=!section2">+ Create New Item</button>
</div>
<div ng-show="section1">
<ul>
<li ng-repeat="name in names">
<input type="text" ng-model="name.item">
</li>
</ul>
<button type="button" ng-click="section1=!section1">Save</button>
</div>
On view 2 There is a button "Create New item" , List of Input fields with same value of view 1's list items and a save button.
This view 2 is basically edit mode of view 1.
Upto now works fine.
Problem: If I click "+Create new item", "View 2" Should Hide and "View 3" should Open.
View 3 Contains some blank input list and "Save button".Clicking on "save button" Hide "View 3" and again open "View 1".
View 3
<div ng-show="section2">
<ul>
<li ng-repeat="name in names">
<input type="text">
</li>
</ul>
<button type="button" ng-click="section2=!section2">Save New List</button>
</div>
I am struggling to manage 3 different view based on different button click with ng-show and Hide. It's not showing and hiding properly from clicking "+create new button".
Is this possible to make it work perfectly with ng-show & ng-hide only ?
Is there any better way to handle ?
Any help will be appreciated.
A better way to handle what you're trying to do is to have a variable that holds the index of the current section. Then, you could use something like ng-show="currentSection === 1" which I think would be a little more straight forward.
Then your click action could look more like ng-click="currentSection = 1". That will show all elements with ng-show="currentSection === 1".
Does that help any?
I have modified your plunker to fix your issue. You need to use both variable in ng-show
ng-show="section1 && !section2"
http://plnkr.co/edit/rdKIT4leGM9U7BNoE01B?p=preview
There are better ways to achieve what you are trying to achieve.
Try ng-switch for example
https://docs.angularjs.org/api/ng/directive/ngSwitch
I am using semantic-ui and I want to show some info text in dropdown. But it act as a link even it's a <div class="header item">
Here profile, settings and logout are link and rest are text(non-clickable)
sample mockup I tried with.
<div class="ui dropdown item">
<i class="icon dropdown"></i>
<div class="menu hidden">
<div class="header item">Narottam Guattom</div>
Action one
Action one
Action one
</div>
</div>
Semantic-ui treat that div as a link and dropdown get closed on click.
Is there better way to implement this in semantic-ui Or how can I prevent click event.
You should customize items selector. Try to use next code
$.fn.dropdown.settings.selector.item = '.menu > .item:not(.header)'; // change selector for all dropdowns
Also you can specify item selector locally. Read more about dropdown DOM settings to configure it properly
$( ".header " ).click(function( event ) {
event.preventDefault();
........//Custom code
});