Develop Reference

Vue JS - Input value text is not updating

I have an input component that when registered in the parent, the value is tied to a variable 'searchText'. searchText holds the text value of the search input. When I watch the {{searchText}} in the template, the variable will be updating accordingly. I'm also trying to set the value of the input through a button click. I have a list of locations and when I select one of the locations I want to update the value of the input. My issue is that although the value {{searchText}} is updating according to the text of the item I clicked, it does not update the text in my input.
How can I also set the text of the input as the text of the updated clicked item?
Search.vue
//Template
<div class="location-search-wrapper">
{{searchText}} // This updates both when I type and also when I select the item
<SearchInput :type="'text'"
:value="searchText"/> // Here the value does not update when I click the item
<div v-if="LocationSuggestionBox" class="search-suggestions">
<LocationSuggestionBox :popular-suggestions="popularSuggestions"
:city-list="searchResults"
:select-location="selectLocation"/>
</div>
</div>
//Script:
// Here the value of search text is updated according to the location selected
function selectLocation(location) {
if (location) {
searchText.value = location
}
}
SearchInput.vue
//Template
<input ref="inputField"
:type="type"
:id="fieldName"
:name="fieldName"
:placeholder="placeholder"
v-model="input"
class="form-input"/>
// Script:
const input = ref('');
(function setValueOnCreate() {
if (props.value) {
input.value = props.value;
}
})();
LocationList.vue
//Template
<div class="location-suggestion-box">
<div v-for="(city, i) in cityList"
:key="i"
:value="city"
#click="selectLocation(city)"
class="suggestion-item">
{{ city }}
</div>
</div>
// script:
props: {
cityList: {
type: Array,
required: false
},
selectLocation: {
type: Function,
required: false
}
},

Try to watch the value prop instead of using IIFE :
import {watch,ref,.....} from 'vue'
....
const input = ref('');
watch(()=>props.value,(val){
if(val){
input.value = val;
}
})

Angular dynamic checkbox Filtering implementation

thanks in advance
my Requirement is to make a custom filter with name wise search(done) and checkboxes which filters a Table's Rows(array of objects) by matching the checkbox value with the Row['tags'] (array of strings) and returns row if the tags array consist of value in a checkbox ,
The problem is that the filters(checkbox) is obtained from DB and Dynamically populated thus I cannot use ngmodel
Any implementation ideas are highly appreciated, I've seen a lot of questions with static filters and some filters using pipes but how to handle the dynamic case
so far my implementation,
Template:
<div id="searchByTag" *ngFor="let tag of tagList">
<input
type="checkbox"
(change)="filterByTags(tag, $event)"
/>{{ tag }}
</div>
Ts:
rows=[{},{}] //from db
temp = rows // copied when getting row from db
filterByTags(FilterTag, event) {
if (event.target.checked) {
const filteredRow = this.rows.filter((obj) => {
return tag.includes(FilterTag.toLowerCase());
});
this.rows = filteredRow;
} else {
return (this.rows = this.temp);
}
}
a Row object:
{
"xx":'yyy',
....,
"tags" : [
"org",
"pcb",
]
}
other problem is that the filtering technique currently returns only one row which matches the condition (cleared), but the main thing is the dynamic implementation of tags

you can have ngModel:
if this is your checkboxes = ["org", "pcb"];
then all you need is a record to bind checkboxes values to it:
checkboxes: {[id: string]: {value: any}} = {};
for(let tag of this.tags) {
this.checkboxes[tag] = {value: false}
}
now in your template:
<input type="checkbox" *ngFor="let item of tags"
[(ngModel)]="checkboxes[item].value">
you can see this in this stackblitz:
stackblitz

How to manually add Items to MultiSelect in react-selectize?

I'm trying to add new value to react-selectize multiselect when the user clicks on a button (I use http://furqanzafar.github.io/react-selectize/#/) .
In JQuery I just call addItem(value, silent) on a button click.
for example in JQuery:
v.selectize.addItem("email#gmail.com");
In My code:
I created some MultiSelect component:
<MultiSelect
placeholder = "All Emails"
options = {this.state.emails.map(
source => ({label: source, value: source})
)}
onValuesChange = {value => this.onInputChange(value, "sources")}
/>
Then I have this button on the bottom of the page:
<button OnClick={this.addEmailValue("email#gmail.com")}></button>
When I click on the button it goes to:
addEmailValue(email){
//here I want to add the email as a item to the multiSelect
}
How can I add "email#gmail.com" to the MultiSelect as an item? (just like the JQuery example on top)
Thanks.

By the looks of things, you just need to update the 'emails' state by pushing the new email to it in your addEmailValue function. For instance:
addEmailValue(email) {
var emails = this.state.emails;
emails.push({
label: email,
value: email
});
this.setState({
emails: emails
});
}

How to hide the option in dropdownlist in Angular JS

I have a dropdownlist and I need to hide one option based on the condition
Mycode is something like below :
$scope.sqs.qs6_PropertyType.answer = _.findWhere($scope.propertyType, { id: '2' });
// this is to set the selected value to 2
I need to Hide the option with value="2" I have written something like below:
$("#qs6_PropertyType").children('option[value="2"]').hide();
I have tried like below as well but its not working
//var qs6obj = angular.element(document.querySelector('#qs6_PropertyType'))
//qs6obj.childElement.remove('option[id="2"]');
HTML :
<td class="cell">
<div data-dropdownlist-question=""
data-ng-model="subject.sqs.qs6_PropertyType"
data-question-attrs="{
questionCell: { visible: false },
answer: {
items: propertyType,
theme: 'native',
style: {
width: '41px'
}
}
}">
</div>
</td>
How to hide the option id ="2"

Can you define a set of selectables for the values in the drop down and bind using ng-options, and remove an item from this when you initialise your form?

I have Filtered the object something like below:
$scope.propertyType = $scope.propertyType.filter(function (e) { return e.id !== '2' })

How to select all with ng-checked and ng-model

I have an Ionic application(it work the same like Angularjs) and I have a little problem.
<ion-list class="list-inset subcategory" ng-repeat="item in shops">
<ion-checkbox class="item item-divider item-checkbox-right" ng-model="selectAll">
{{item}}
</ion-checkbox>
<ion-item ng-repeat="value in data | filter:{shopName: item}" class="item-thumbnail-left" ng-click="openProduct(value)">
...
<div class="row">
<ion-checkbox stop-event='click' ng-model="value.selected" ng-checked="selectAll">{{value.name}}</ion-checkbox>
</div>
...
</ion-list>
When I click on item with ng-model="selectAll" all items is selected. But I have property value.selected. It sets false for each one value. When I click on item with ng-model="value.selected" it changes. But when I want selec all and click on item with ng-model="selectAll" this propety doesn't change.
Help me please.
Note: I have ng-repeat in the ng-repeat. First ng-repeat is for shops, the second is for products. And I have a filter by shopName. And I want select all by shops. Now it works how I want, but doesn't change property value.selected. Value it is produt, item it is shop.

the state of selectAll can be derived from the state of your other check boxes so it should not be stored as a seperate field.
You could use a getterSetter on the selectAll model to determine weather it should be checked. e.g.
<input type="checkbox" ng-model="selectAll" ng-model-options="{getterSetter: true}"/>
JS
var getAllSelected = function () {
var selectedItems = $scope.Items.filter(function (item) {
return item.Selected;
});
return selectedItems.length === $scope.Items.length;
}
var setAllSelected = function (value) {
angular.forEach($scope.Items, function (item) {
item.Selected = value;
});
}
$scope.selectAll = function (value) {
if (value !== undefined) {
return setAllSelected(value);
} else {
return getAllSelected();
}
}
http://jsfiddle.net/2jm6x4co/

you can use ngClick on the item with ng-model="selectAll". you can call a function in ng-click and then make selected=true for all other items where ng-model="value.selected".