We Keep Coding

Retrieve updated array values when the same array is updated with different condition

I want to display a dropdown value based on selection of type in another dropdown in angular
Basically I have an array of values which I will filer it on the based on type selected which is working fine. below is the code of filtering.
filterMethod(){
if(type === 'P'){
this.filteredArray = this.relationArray.filter(ele=> this.personValue.includes(ele.name));
} else{
this.filteredArray = this.relationArray.filter(ele=> this.orgValue.includes(ele.name));
}
}
And in HTML I'm looping it.
<mat-select formControlName="relation" aria-owns="relationshipSelect">
<mat-option *ngFor="let rel of filteredArray" [value]="relation.name">
{{rel.value}}
............
This above HTML is basically a child component where user can multiple dropdown when clicked new button. i.e., another dropdown will come next to it and so on...
Here what is happening is after selecting the relation dropdown when user click new button another relation dropdown is coming but the existing relation dropdown value is vanished. If user fires the filterMethod() method the vanished value will come.
I suspect it is because of calling new button new instance will be created and array will be set to its original state.

Can't load SelectTagHelper when using the multiple attribute

As a simple test I'm passing 2 lists to a javascript function, only the list without a multiple attribute populates, the second list does get the "select one or more items" option but not 1,2,3 and only after I lose focus from list2. Can anyone tell me how I can repopulate the multiselect?
<select id="lstTest"></select>
<select id="lstTest2" multiple="multiple"></select>
function TestList(obj) {
var x = $(obj);
x.append('<option value="">Select one or more items</option>');
x.append('<option value="1">1</option>');
x.append('<option value="2">2</option>');
x.append('<option value="3">3</option>');
}
Empty Lists
List 1 after javascript call
List 2 after javascript call
Turns out the select is referencing custom js to turn it into a checkbox list as a way of selecting the items instead of highlighting. I need to treat it as a checkbox list and not just a list of options, which I'm still not sure how to do, I need to clear and add new checkboxes.

jQuery: How do you check to see if a selected dropdown item is already in a textbox list?

I've got a dropdown box to the left of a select/option box.
I would like for jquery to check to see if the item already exists by value. The value for each option won't be in any order.
Text box:
<select id="selectbox">
<option value="20:32">Something1</option>
<option value="103:16">Something2</option>
</select>
The dropdown will have a list of items that also share the same values.
Is there a way to do something like:
$("#boxbutton").click(function () {
if (('#dropdownbox :selected').val() doesn't exist inside #selectbox list)
{
...add dropdownbox item;
} else { do nothing };
});
I want to make sure the function is checking the entire selectbox value list and NOT selected/highlighted entries in the selectbox. The textbox won't always have selected entries and will need to be checked anyway.
When The user goes to the dropdown box to add another entry to the selectbox it should repeat the search.
Not having any luck using the .length keyword. Any ideas?

Try this:
var value = $('#dropdownbox').val(); // :selected is unnecessary
var hasValue = ( $('#selectbox option[value="'+value+'"]').size() > 0 );

Keep one Array and put all of your values into it. Then you can easily validate your text box value with that array.
Or you have to get all option tag value by using DOM iteration.

two ng-repeaters on the same page

I have a page with a list of items on it. Each row has a button. By pressing a button list item is added to another list on the same page (it's a typical "order" form). I'm using angular ng-repeater to show the first list. After user press a button an item info is added to JSON varaible. The question is what's the best way to show user's choice list on the same page? So far I'm think of adding an attribute to the first list so when user choose it, it'll be shown in the second list. But I also want first list to be modified by user without any changes to the second one. Any ideas?

Check the code below, the button ng-click directive is calling the function AddtoList2($index) to add the current List1 item to List2, optionally it removes the current item from List1.
At template side
<div ng-repeat="item1 in List1">
...
<input type="button" ng-click="AddtoList2($index)" />
</div>
<div ng-repeat="item2 in List2">
...
</div>
At controller side
$scope.List1 = [];
$scope.List2 = [];
$scope.AddtoList2 = function (idx) {
var item = $scope.List1[idx];
$scope.List2.push(item);
//If you want to remove from List 1
$scope.List1.splice(idx, 1)
};

How can I call a function with user selected data?

I'm having a contacts array holding list of emails. I generate div's using ng-repeat when user clicks i on a particular div i call ng-click="foo($index)"
var contacts=[someMail];
var userSelectedContact[];
$scope.foo=function(row)
{
userSelectedContact.push(contacts[row]);
}
The problem is when I add "|filter" in ng-repeat to search and select a particular contact.
Since filter creates another array after filtering: When ever user selects a contact foo($index) is called, and it is adding some other contact which is not selected by the user.
I can understand it since I am just using $index which is different from the index in original contacts array before filter.
So I have to stop using either filter (or) index to find the user selected contact.
What should i do? Is there any other way?
How can I call a function with user selected data like ng-click="foo(someEmail)"?

you can pass the whole ng-repeat item it the ng-clickfunction
<div ng-repeat="item in items" ng-click="myFunction(item)"></div>
and then in the controller
$scope.myFunction(item) {
console.log(item.name);
//or whatever you want to do with the item
}