I have a list, I want to select the first item of my list when I select the last item.
Is there a way to do it ?
Is there a way to handle this please ?
<ion-select interface="popover" [ngModel]="selecteduser._id" (ngModelChange)="selectUser($event)" (ionChange)="onChange($event)">
<ion-option *ngFor="let user of users" [value]="user._id">
</ion-content>{{ getUserNickname(user }} </ion-option>
<ion-option>Configuration</ion-option>
</ion-select>
So I want when I click on my configuration, it will select the first item of my list
There is my ts
openConfigPage() {
this.selectedUser = this.users[0];
this.navCtrl.push(ConfigPage)
}
selectUser(userId: string) {
this.selectedUser = this.users.find(b => b._id === userId)
this.onSelect.emit(this.selectedUser)
}
Is there a way to do it with the DOM ?
To me, it seems like not much information is being present here. Don't let this discourage you from asking questions in the future, just please make sure to be specific when asking your question and making sure to tag it appropriately.
Since you've asked how to accomplish this in javascript, here is an answer on how to do this in javascript: https://jsfiddle.net/gqvfx850/24/
The idea is that the items are being added in a to the page in a loop, we then access the last item in the loop:
//if this is the last item in the loop
if(x === listItems.length - 1)
{
And add an event listener for when it's been clicked
//add an event listener that also checks the first box when checking
//this one
radioBtn.addEventListener("click", function()
{
//grab the class of all radio buttons
var firstRadioBtn = document.getElementsByClassName("radio");
//but you only want to change the first one
firstRadioBtn = firstRadioBtn[0];
we then access the first item in the list, and check it
//set the first button to being checked
firstRadioBtn.checked = true;
}, false)
}
This idea works assuming that your HTML is being set up by javascript as well, if that's not the case let me know and I can create another fiddle for you.
I'm not familiar with angular, so if this approach doesn't suit you just please let me know why and I can see if I can provide any other assistance on the matter.
Template
Select Last One <select [(ngModel)]="selectedItem" (ngModelChange)="onSelect($event)">
<option *ngFor="let item of items" [value]="item">{{item}}</option>
</select>
<br><br>
You have selected : {{selectedItem}}
Component
export class AppComponent {
selectedItem:string;
items = [
'Purab', 'Pashchim', 'Uttar', 'Dakshin'
];
onSelect(selectedItem) {
let len = this.items && this.items.length;
this.selectedItem = len && selectedItem === this.items[len-1]?
this.items[0]:selectedItem;
}
}
Demo : https://ng-on-lastselect-checkfirst.stackblitz.io
Source : https://stackblitz.com/edit/ng-on-lastselect-checkfirst
Related
I have a multi-select drop-down with many items to select. As of now When I select single item, the item is passed to Onselect event and based on condition the respective data from another array newArrayAfterProjectFilter is pushed tomyDataList as shown below in OnselectErp. As per my requirement When I try to select 2nd item in dropdown, only the 2nd item is pushed to OnselectErpfunction, not both items(1st and 2nd).
How to correctly do this?
<ng-multiselect-dropdown *ngIf="showDropDown"
[placeholder]="'Erp Rfq Number'" [data]="dropdown_Erp"
[settings]="dropdownSettings" (onSelect)="OnselectErp($event)">
</ng-multiselect-dropdown>
OnselectErp(item: any) {
this.myDataList = [];
this.newArrayAfterProjectFilter.forEach(element => {
if (element.properties.map.aclrq_rfqNum == item.item_text) {
this.myDataList.push(element);
}
});
console.log(this.myDataList)
}
I would need more details to reproduce your issue and provide you complete solution.
But you can try below:
Add [(ngModel)]="selectedItems" in HTML and add selectedItems property in corresponding component.ts
<ng-multiselect-dropdown *ngIf="showDropDown"
[placeholder]="'Erp Rfq Number'" [data]="dropdown_Erp"
[settings]="dropdownSettings" (onSelect)="OnselectErp($event)"
[(ngModel)]="selectedItems">
</ng-multiselect-dropdown>
Create a button on UI and on click call below function:
filter() {
this.myDataList = this.newArrayAfterProjectFilter.filter(element =>
this.selectedItems.some(item=> element.properties.map.aclrq_rfqNum == item.item_text));
console.log(this.myDataList)
}
As I said, I have not tried this but should work with no or minimal change.
I have a little Pure Javascript prototype demonstrating shopping cart functionality.
I have a Button which adds the item to the cart (and toggles to an ON state) and then a Card which represents the item in the shopping cart.
So far I have worked;
Attach data to Add to Cart Button ✓
Send data from Button to Shopping Cart and create new Item Card ✓
However, I cannot work out how to link Button and newly created Item Card so I can:
Remove Item Card and toggle button OFF or
Toggle button OFF and remove the correct Item Card
https://codepen.io/rhysyg03/pen/PdyyWE
Your help would be much appreciated.
FYI - this is just for a demo so it doesn't need to be production ready code.
Thank you.
const shoppingCartEl = document.querySelector('#js-shopping-cart');
const addToCartButton = document.querySelector('#js-add-to-cart');
var buttonToggle = false;
var itemOneData = {
name:'Shoes',
price:"$105.00"
}
function addItem(button, itemData) {
console.log("ADD");
// var itemEl = createElement('<div class="item-card"></div>');
const itemEl = document.createElement("div");
itemEl.classList.add("item-card");
itemEl.innerHTML = itemData.name + itemData.price + "<button id='js-item-cart-remove'>Remove</button>";
shoppingCartEl.appendChild(itemEl);
const itemCardRemove = document.querySelector('#js-item-cart-remove');
itemCardRemove.addEventListener('click', () => {
removeItem();
})
}
function removeItem() {
console.log("REMOVE");
// how to do this part
}
addToCartButton.addEventListener('click', () => {
if (buttonToggle == false) {
addItem(addToCartButton, itemOneData);
buttonToggle = true;
addToCartButton.innerHTML = "Remove from Cart";
} else {
// How to do this part
removeItem();
buttonToggle = false;
addToCartButton.innerHTML = "Add to Cart";
}
})
(I am sorry I am tired a bit, you should read the very ending, firstly)
You should have items like this:
var itemOneData = {
id: 1,
name:'Shoes',
price:"$105.00"
}
var itemTwoData = {
id: 2,
name:'Shoes',
price:"$105.00"
}
Then you should store identifier on the item card element:
...
itemEl.classList.add("item-card");
itemEl.setAttribute("data-item-id", itemData.id)
...
After this, when clicking on remove button, you should:
Get the id of item to be removed itemEl.getAttribute("data-item-id")
Pass the id to remove function removeItem(id)
(this was where I've given up) Find the item with the attribute "data-item-id" having value of the id and replace it to empty string ""
There is another solution, probably far less complex: when clicking on remove button simply find it's parent and replace it with empty string.
This is a quick solution, just to get what you are looking for, but of course, maybe you should be having some 'state' where you have your cart items, and render the UI based on that state. In this quick solution, what I am doing is event delegation, as we know that the one element that will exist at the beginning is the cart div. So we place the event on this element and then check which element are we clicking, and also doing some check so we assure only that an item-card can be deleted. codepen.io/anon/pen/WgaYxe?editors=1011
Hope this helps and if you need more details please feel free to ask!
Bye
I have a JSON structure which represents as hierarchical elements.
It looks like the following:
{
"url":"http://docsetups.json",
"partnerId":1,
"fieldDefs":
[
{"roleName":"Make","roleId":1,
"children":[{"roleName":"Invoice Number","roleId":11}]
},
{"roleName":"Model","roleId":2,
"children":[
{"roleName":"Manufacturer","roleId":21},
{"roleName":"EquipmentCode","roleId":22},
{"roleName":"EquipmentSSN","roleId":23}
]
}
]
}
Plunker
I've have created a plunker at: http://plnkr.co/edit/betBR2xLmcmuQR1dznUK?p=preview
I am using ng-repeat to display this in elements as a hierarchy of elements like the following:
When I click on either element the entire structure expands and looks like the following:
The code which renders the DOM is nice and easy and looks like the following:
<div class="headerItem"
ng-class="{focus: hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false"
data-ng-click="vm.onClick(item.roleName)"
data-ng-repeat="item in vm.documentSetups.fieldDefs">{{item.roleName}}
<div class="subItem" ng-show="vm.isVisible"
data-ng-repeat="subItem in item.children">[ ] {{subItem.roleName}}
</div>
</div>
vm.isVisible
The thing to focus on here is the subitem which has the ng-show="vm.isVisible" so that it only displays if that value is true.
Show Only The Subitem of the Clicked Parent
However, I'd like to only display the subitem when its parent item is clicked -- instead of showing all subitems like it does now. Can someone offer a good way to do this? I'm hoping to do it without a directive, because I am interested in whether or not this is possible without a directive or if the code is terribly convoluted in that case.
If you have a solution which includes creating a directive, please keep it as simple as possible. Thanks.
I think you should define a flag for every item which determine if the item is open.
Then you pass the item itself into handler:
data-ng-click="vm.onClick(item)
after that - you simply need to invert isOpen flag:
function onClick(item)
{
item.isOpen = !item.isOpen;
}
The whole view snippet:
<div class="headerItem"
ng-class="{focus: hover}"
ng-mouseenter="hover = true"
ng-mouseleave="hover = false"
data-ng-click="vm.onClick(item)" data-ng-repeat="item in vm.documentSetups.fieldDefs">{{item.roleName}}
<div class="subItem" ng-show="item.isOpen" data-ng-repeat="subItem in item.children">[ ] {{subItem.roleName}}</div>
</div>
The plunker: http://plnkr.co/edit/N8mUZaVfmLpnlW4kxzSr?p=preview
#Oleksii You're answer is very close and it did inspire me to develop the following answer so I appreciate your input and I did upvote you. However, there's a bit more to it than what you gave me.
View Solution at Plunker
I forked the previous plunker and you can see the final solution at:
http://plnkr.co/edit/QvyHlLh83bEyvlNkskYJ?p=preview
No Directive Required
Now I can click either or both element and they expand independently. Here's the sample output:
It took a bit of thinking, but what I did first was create a new type which holds a roleName (consider it unique) and a isVisible boolean. I call that type visibleItem and it looks like this:
var visibleItem = function (roleName){
this.isVisible = false;
this.roleName = roleName;
};
After that I created an array to hold all the visibleItems (1 for each node):
var visibleItems = [];
Now when I load the json I go ahead and create 1 visibleItem object for each node and push it into the visibleItems array.
$http.get('items.json')
.success(function(data, status, header, config) {
vm.documentSetups=data;
for (var x = 0; x < vm.documentSetups.fieldDefs.length; x++)
{
visibleItems.push(new visibleItem(vm.documentSetups.fieldDefs[x].roleName));
}
})
They are "keyed" by their roleName (consider it unique).
Next, I had to write two helper methods (setVisibleItem and getVisibleItem)
function setVisibleItem(roleName)
{
for (var x = 0; x < visibleItems.length;x++)
{
if (visibleItems[x].roleName == roleName)
{
visibleItems[x].isVisible = !visibleItems[x].isVisible;
}
}
}
function getVisibleItem(roleName)
{
for (var x = 0; x < visibleItems.length;x++)
{
if (visibleItems[x].roleName == roleName)
{
return visibleItems[x].isVisible;
}
}
return false;
}
Wire Up The Helper Methods
Finally, I wire up the setVisibleItem to the ng-click of the element and I wire up the getVisibleItem to the ng-show directive.
data-ng-click="vm.onClick(item.roleName)"
data-ng-repeat="item in vm.documentSetups.fieldDefs">{{item.roleName}}
<div class="subItem" ng-show="vm.getVisibleItem(item.roleName)"
data-ng-repeat="subItem in item.children">[ ] {{subItem.roleName}}</div>
</div>
Summary Of How It Works
Basically each of those just iterates through the list and checks to insure if the roleName sent in matches the roleName of the item. If it does it sets or gets the value.
Solved Without a Directive and Not Bad
It's a lot more work than you think it'll be, but I didn't have to implement a directive and the code is still fairly basic.
I've created this jsBin to demonstrate the issue I'm having. If you go here, try type "Five" and move on. Your natural reaction would be to type "Five" and then press tab, and if you wanted "Five-Hundred," you'd arrow-down once; however, in this case, you have to type "Five" and then either press escape or physically mouse out of the box without clicking any of the other options
So, basically, when you're using typeahead, if there is at least one matching result for your current criteria, pressing tab will select it. My expected behavior is that as you type, the current selected option is exactly what you're typing, and if you want one of the other results you must down-arrow one or more times.
Here is the code that's in the jsBin:
<div ng-controller="TestController">
<div>
{{selected}}
</div>
<input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue">
</div>
And the JavaScript:
var app = angular.module('app', ['ui.bootstrap'])
.controller('TestController', function($scope) {
$scope.typeaheadOptions = [
'One','Two','Three','Four','Five-Hundred','Fifteen','Fourteen','Fifty','Six','Seven','Eight','Nine','Ten'
]
});
I ended up modifying ui-bootstrap to work how I want it to.
I added a mustMouseDownToMatch property/attribute to the directive, like:
<input type="text" ng-model="selected" typeahead="item for item in typeaheadOptions | filter:$viewValue" typeahead-mouse-down-to-match="true">
And the javascript:
var mustMouseDownToMatch = originalScope.$eval(attrs.typeaheadMouseDownToMatch) ? originalScope.$eval(attrs.typeaheadMouseDownToMatch) : false;
I also added this function which will put the current text into the first item of the typeahead list, and make it the selected item:
var setFirstResultToViewValue = function (inputValue) {
scope.matches.splice(0, 0, {
id: 0,
label: inputValue,
model: inputValue
});
// set the selected item to the first item in the list, which is this guy
scope.activeIdx = 0;
}
And that is called in the getMatchesAsync call in the typeahead directive:
var getMatchesAsync = function(inputValue) {
// do stuff
$q.when(parserResult.source(originalScope, locals)).then(function(matches) {
// do stuff
if (matches.length > 0) {
// do stuff
}
if (mustMouseDownToMatch) {
setFirstResultToViewValue(inputValue);
}
// do stuff
};
A more recent way to do this since I ran into the same issue and maybe wasn't available back then.
You can add this now as an attribute
typeahead-should-select="$ctrl.typeaheadShouldSelect($event)"
In your controller or custom component add the following which will allow you to tab now and also if you tab over the item you can press enter to select it.
self.typeaheadShouldSelect = function($event) {
if ($event.key === 'Tab') {
var e = $.Event('keydown');
e.which = 40;
$($event.currentTarget).trigger(e);
}
if ($event.key === 'Enter') {
return true;
}
}
I'm using the chosen plugin to build multiple select input fields. See an example here: http://harvesthq.github.io/chosen/#multiple-select
The default behavior disables an option if it has already been selected. In the example above, if you were to select "Afghanistan", it would be greyed out in the drop-down menu, thus disallowing you from selecting it a second time.
I need to be able to select the same option more than once. Is there any setting in the plugin or manual override I can add that will allow for this?
I created a version of chosen that allows you to select the same item multiple times, and even sends those multiple entries to the server as POST variables. Here's how you can do it (fairly easily, I think):
(Tip: Use a search function in chosen.jquery.js to find these lines)
Change:
this.is_multiple = this.form_field.multiple;
To:
this.is_multiple = this.form_field.multiple;
this.allows_duplicates = this.options.allow_duplicates;
Change:
classes.push("result-selected");
To:
if (this.allows_duplicates) {
classes.push("active-result");
} else {
classes.push("result-selected");
}
Change:
this.form_field.options[item.options_index].selected = true;
To:
if (this.allows_duplicates && this.form_field.options[item.options_index].selected == true) {
$('<input>').attr({type:'hidden',name:this.form_field.name,value:this.form_field.options[item.options_index].value}).appendTo($(this.form_field).parent());
} else {
this.form_field.options[item.options_index].selected = true;
}
Then, when calling chosen(), make sure to include the allows_duplicates option:
$("mySelect").chosen({allow_duplicates: true})
For a workaround, use the below code on each selection (in select event) or while popup opened:
$(".chosen-results .result-selected").addClass("active-result").removeClass("result-selected");
The above code removes the result-selected class and added the active-result class on the li items. So each selected item is considered as the active result, now you can select that item again.
#adam's Answer is working very well but doesn't cover the situation that someone wants to delete some options.
So to have this functionality, alongside with Adam's tweaks you need to add this code too at:
Chosen.prototype.result_deselect = function (pos) {
var result_data;
result_data = this.results_data[pos];
// If config duplicates is enabled
if (this.allows_duplicates) {
//find fields name
var $nameField = $(this.form_field).attr('name');
// search for hidden input with same name and value of the one we are trying to delete
var $duplicateVals = $('input[type="hidden"][name="' + $nameField + '"][value="' + this.form_field.options[result_data.options_index].value + '"]');
//if we find one. we delete it and stop the rest of the function
if ($duplicateVals.length > 0) {
$duplicateVals[0].remove();
return true;
}
}
....