I have a data object that contains color item (string), and It's associated with radio input, where I have v-model on t.
I have Add To Cart button, which I display conditionally in template using v-if - so if color wasn't selected, the button won't be visible, otherwise it would be.
The problem is that color always keep one value, and If I switch to another product it would keep the value from previous product, and button would be visible instantly.
Is there a way to clear color string after route changes - there is $route.afterEach but I'm not sure how to use it here.
Thanks.
Code:
<div class="Radio">
<input
type="radio"
id="radio-{{ va.attributes.term_id }}"
name="variation"
value="{{ va.attributes.color_name }}"
v-model="color"
>
<label for="radio-{{ va.attributes.term_id }}"></label>
</div>
Stuff about buttons
<div v-if="color">
<button #click="addToBag" class="Btn Btn--primary Btn--expanded">Add to Bag</button>
</div>
<div v-else>
<button class="Btn Btn--primary Btn--expanded" disabled>Add to Bag</button>
</div>
There is data related to JS
data() {
return {
product: [],
shared: State.data,
color: ''
}
}
1.user a global event bus in the entry js
window.eventBus = new Vue();
2.add a event handler to this color picker component , ie in ready()
ready(){
var vm = this
eventBus.$on('clearColorPicker', function(){vm.color = ''})
}
3.trigger the clearColorPicker event in $route.afterEach by
eventBus.$emit('clearColorPicker')
This can help you to trigger some change to certain component during route change.
But I think In your case there is a better way like the changing of product trigger the color picker reset
Related
I am using angular material for checkbox.
in component.ts
dataList: any[] = [
{ name: 'EmployeeName', flag: true, 'label': 'Employee Name'},
{ name: 'EmployeeDepartment', flag: false, 'label': 'Employee Department'},
{ name: 'EmployeeExperience', flag: false, , 'label': 'Employee Experience'}
]; // will have 30+ element in array
html (this opens as modal)
<div *ngFor="let data of dataList">
<section>
<mat-checkbox [checked]="data.flag" (change)="onChange($event, data)">{{data.label}}</mat-checkbox>
</section>
</div>
<div>
<button (click)="onClose()">
Close
</button>
<button(click)="onApply()">Apply</button>
</div>
some of the checkbox will be pre-checked, if checked than behind modal there we will be filter dropdown for checked object.
problem is if I check the object(eg- Employee Department), than behind the modal that object(Employee Department) will be added instantly and the change in UI will be visible. what I want is add that filter object (user can select multiple object at a time) only after clicking apply button and changes in UI should be visible. if I click on close that nothing should be added.
html for behind modal page
//<ngx-select-dropdown> whole config is not listed
<div class="grid-container">
<ng-container *ngFor="let data of dataList">
<div class="grid-item" *ngIf="data.flag">
<div>
<p>{{data.name }}</p>
</div>
<ngx-select-dropdown [config]="config">
</ngx-select-dropdown>
</div>
</ng-container>
</div>
I tried keeping checkbox values in another object and set value only on click of apply but the problem persisted. what should I do in onChange($event, data) and onApply() so that I can achieve the behavior I want.
Thanks in Advance
You could simply save the checkbox values in another object and once the user hits the apply button then have your function for example
onApply() that will assign the new values from the checkbox to your data
So i am working on a fieldset pagination in a form i'm making with Vue. The issue i now have with my pagination is that the state-change of the visibility of the pagination controls is applied to the previous fieldset, instead of the current one.
My form is constructed like this:
<template>
<form>
<fieldset id="one" v-show="activePage == 'one'">
<input />
<pagination-ctrl #paginate="paginate" />
</fieldset>
<fieldset id="two" v-show="activePage == 'two'">
<input />
<pagination-ctrl #paginate="paginate" />
</fieldset>
<fieldset id="three" v-show="activePage == 'three'">
<input />
<pagination-ctrl #paginate="paginate" />
</fieldset>
</form>
</template>
<script lang="coffee">
import Pagination from '#/components/Pagination.vue'
import FormInput from '#/components/FormInput.vue'
export default
name: 'Form'
data: ->
activePage: 'one'
components:
'pagination-ctrl': Pagination
'input': FormInput
methods:
paginate: (data) ->
#activePage = data
</script>
Pagination.vue contains the buttons to switch between the active fieldset and looks like this:
<template>
<div class="btn-group" role="button" v-on:click="paginate" ref="btn-group">
<button class="ui-button prev" rel="prev" :disabled="disablePrev">Previous</button>
<button class="ui-button next" rel="next" :disabled="disableNext">Next</button>
</div>
</template>
<script lang="coffee">
export default
name: 'FormControl'
data: ->
pages: null
disablePrev: true
disableNext: true
methods:
accumelatePages: ->
fieldsetNode = #$refs['btn-group'].parentNode
formNode = fieldsetNode.parentNode
# cast fieldsets to true array in favor of HTMLNodeCollection
#pages = Array.prototype.slice.call(formNode.getElementsByTagName('fieldset'))
determineButtonVisibility: (item) ->
currIndex = #pages.findIndex((node)->
node.getAttribute('id') is item
)
#disablePrev =
if currIndex > 0
false
else true
#disableNext =
if currIndex < (#pages.length - 1)
false
else true
paginate: (e) ->
e.preventDefault()
node = e.target
if node.getAttribute('rel') is 'next'
activeNode = node.parentNode.parentNode.nextElementSibling
if node.getAttribute('rel') is 'prev'
activeNode = node.parentNode.parentNode.previousElementSibling
if activeNode?
nodeId = activeNode.getAttribute('id')
#$emit('paginate', nodeId)
#determineButtonVisibility(nodeId)
mounted: ->
#accumelatePages()
#determineButtonVisibility(#pages[0].getAttribute('id'))
</script>
The idea is that when you click a button, determineButtonVisibility() determines the position of the current fieldset in relation to the surrounding fieldsets, and sets the display of the buttons accordingly. The problem however is that this works perfectly fine, but these display-state's are applied to the fieldset you just navigated away from.
So if i click on the next button in fieldset one, the state-change is applied to fieldset one (old context) instead of fieldset two (new context).
Perhaps i'm now overlooking something really obvious or heading in a completely wrong direction, but i've already spent way more time on this then i actually should sho i'm kind of lost atm.
I believe if you pass activePage as a prop from Form.vue into your Pagination.vue, and then set a watcher for when that value changes, you can have each instance of pagination-ctrl dynamically run determineButtonVisibility on change.
<pagination-ctrl #paginate="paginate" :activePage="activePage" />
I'm facing difficulties in Angular UI development. Here I'm having a requirement that:
on click of Add Button it should show a hidden form:
on click of Add Button -> Add Button should hide
in hidden form there will be a button Cancel-
if I click on cancel the form should hide and add button should return
I have tried this using Angular 2 template syntax and by declaring nested boolean values, but I'm not getting the perfect answer.
How to do this in Angular 2 or 4? Do I have to use any host Listener or event emitter for this? I'm sharing my sample code and plunker:
template.html
<button(click)="addParameter=addParameter==true?false:true">
Add</button>
<div class="Parameters" *ngIf="addParameter==true">
<input name="hello">
<button (click)="hideForm();">Cancel</button>
</div>
test.ts
export class App {
private addParameter:boolean=false;
}
https://plnkr.co/edit/fa3Pdea1mB4RztAgOAW2?p=preview
You can do this in a couple of ways. Depending on if you want to handle it in component or in template. I personally prefer to keep template clean and do the "work" in component. So in that case your code would simply look like this:
<button *ngIf="!addParameter" (click)="toggleForm()">Add</button>
<div class="Parameters" *ngIf="addParameter">
<input name="hello">
<button (click)="toggleForm()">Cancel</button>
</div>
and TS:
toggleForm() {
this.addParameter = !this.addParameter
}
DEMO: http://plnkr.co/edit/y3bDxsXMTYLtf8HI2PlA?p=preview
and as said, if you want to do this in template, it would look like this:
<button *ngIf="!addParameter" (click)="addParameter = !addParameter">Add</button>
<div class="Parameters" *ngIf="addParameter">
<input name="hello">
<button (click)="addParameter = !addParameter">Cancel</button>
</div>
DEMO: https://plnkr.co/edit/xcSzXGWOMNIhuZ83OXbs?p=preview
I think what you're looking for is something like:
<div>
<form>
<input name="hello">
<button *ngIf="addingForm===false" (click)="addingForm = true">Add</button>
<button *ngIf="addingForm===true" (click)="addingForm = false">Cancel</button>
</form>
<form *ngIf="addingForm===true">
<input name="hidden">
</form>
</div>
In TS:
addingForm = false;
Like here: https://plnkr.co/edit/uXztfHwdWxuTVNIg6sxA?p=preview
In Angular 2 I have this component.html:
<li *ngFor="let something of somethings">
<span>{{something}}</span>
<input class="doit" type="text" *ngIf="iscalled" />
<div id="container">
<button class="btn btn-warning editsection (click)="editAction()">Edit</button>
</div>
</li>
with this component.ts:
editAction(){ this.iscalled = true; }
iscalled is, by default, set to false in my component.
Basically, for each something of somethings I produce, along with my list is an input field that is assigned to it, and a button that runs editAction(). The button is only there if the user clicks on the editAction() button.
Now, as is, clicking on the editAction() button will enable all input fields in my list. I would like to restrict this to the exact li element that it is meant for.
I don't know if Angular 2 has a specific action for this, or if this is a plain javascript solution.
NOTE: with this setup don't set default value of iscalled to false
<li *ngFor="let something of somethings">
<span>{{something}}</span>
<input class="doit" type="text"
*ngIf="something.iscalled" /> //<<<===changed
<div id="container">
<button class="btn btn-warning
editsection
(click)="editAction(something)"> //<<<===changed
Edit
</button>
</div>
</li>
editAction(something){ something.iscalled = true; }
if you want to toggle it then you can do following,
editAction(something){ something.iscalled != something.iscalled; }
I have a list of Items with different button with them. Plunker
Quick View:
I want something like if I click on any of the buttons, related text will be copy to the div above. Also if I click on the button again it will removed from the Div.Same for each of the buttons. [I added manually one to show how it may display ]
I am not sure how to do that in Angular. Any help will be my life saver.
<div ng-repeat="item in csTagGrp">
<ul>
<li ng-repeat="value in item.csTags">
<div class="pull-left">
<button type="button" ng-class='{active: value.active && !value.old}' class="btn btn-default btn-xs">{{value.keys}}</button>
<span>=</span>
</div>
<div class="pull-left cs-tag-item-list">
<span>{{value.tags}}</span>
</div>
</li>
</ul>
</div>
The simplest thing would be to use $scope.tags object to store selected tags and add/remove them with the scope method similar to this:
$scope.tags = {};
$scope.toggleTag = function(tag) {
if (!$scope.tags[tag]) {
$scope.tags[tag] = true;
}
else {
delete $scope.tags[tag];
}
};
Demo: http://plnkr.co/edit/FrifyCrl0yP0T8l8XO4K?p=info
You can use ng-click to put in your scope the selected value, and then display this value instead of "Win".
http://plnkr.co/edit/IzwZFtRBfSiEcHGicc9l?p=preview
<div class="myboard">
<span>{{selected.tags}}</span>
</div>
...
<button type="button" ng-click="select(value)">{{value.keys}}</button>