I have the following enum:
export enum Category {
SYSTEM = 0,
NAVIGATION = 1,
MESSAGING = 2,
MEDIA = 3
}
and a mapping to labels via:
export const CategoryMapping = [
{ value: Category.SYSTEM, label: 'System' },
{ value: Category.NAVIGATION, label: 'Navigation'},
{ value: Category.MESSAGING, label: 'Messaging'},
{ value: Category.MEDIA, label: 'Media'}
];
I also have an object that has the category as its field.
My goal is to display the categories in a select, bind it to the object's category field and display the current value by default when displaying:
<select class="form-control" id="category" [(ngModel)]="myObj.category">
<option
*ngFor="let category of categories"
[ngValue]="category.value"
[selected]="category.value == myObj.category">
{{ category.label }}
</option>
</select>
The categories I'm referring to is the mapping.
However, no value is selected by default. I know that the ngModel and the ngValue types have to be the same, but an enum implicitly is an integer, so I figured it works. Also the selected expression results to true for the matching category, but it's still not selected by default.
By default when you try to use enum value, they return their current index. I think you're assuming to get string value that you have written for enum.
You have to tweak a enum a bit, like instead of getting using enum value like Category.SYSTEM to Category[Category.SYSTEM] which will return a string.
export const [
{ value: Category[Category.SYSTEM], label: 'System' },
{ value: Category[Category.NAVIGATION], label: 'Navigation' },
{ value: Category[Category.MESSAGING], label: 'Messaging' },
{ value: Category[Category.MEDIA], label: 'Media' }
];
Demo Stackblitz
Related
I am working on an SPA application where I have a list of data variables that are used as the <option> tags in the dropdown. I want to navigate to another page on the #change event of the dropdown therefore I want to use either the id or name of the select command as the name of the data property. Here is what I mean:
Here is what I have in the data function:
data(){
return {
participants: [
{ value: 0, linkText: '', linkTerm: 'Select' },
{ value: 1, linkText: '/meetings/participants/create', linkTerm: 'Add New' },
{ value: 2, linkText: '/meetings/participants', linkTerm: 'All Participants' },
],
positions: [
{ value: 0, linkText: '', linkTerm: 'Select' },
{ value: 1, linkText: '/meetings/positions/create', linkTerm: 'Add New' },
{ value: 2, linkText: '/meetings/positions', linkTerm: 'All Positions' },
],
}
}
Here is the select tag where I use the above data variables as the <option> tag:
<select name="participants" id="participants" class="select-field" #change="changeRoute($event)">
<option v-for="p in participants" :value="p.value">{{ p.linkTerm }}</option>
</select>
Now I want to have one function changeRoute($event) from which I will navigate to different pages, therefore I want to use the id or name value as the data property, here is the function:
methods:{
changeRoute($event){
var name = $event.target.name;
var value = document.getElementById($event.target.id).value;
}
}
Here in the above function I want to use the name as the data property as below:
I want to write this:
this.name[value].linkText;
And because name here is the name of the tag which is actually participants so the above line of code should mean something like this:
this.participants[value].linkText
And that should return the linkText of the participants object of the data function.
Any help is appreciated in advance.
Change the below line
this.name[value].linkText;
to
this[name][value].linkText;
I'm creating an app where I need to store selected values in array nested in object (category below). State looks like:
state = {
data: {
user: "",
title: "",
text: "",
category: [], // should store values
},
updateNoteId: null,
}
In my render() I have following form:
<form onSubmit={this.submitNote}>
<Select
name="category"
value={this.state.data.category}
options={options}
onChange={this.handleMultiChange}
multi
/>
<input type="submit" value="Save" />
</form>
Options are:
const options = [
{ value: 1, label: 'one' },
{ value: 2, label: 'two' },
{ value: 3, label: 'three' }
]
So the question is how this.handleMultiChange function should looks like to work. Category[] need to keep all values selected in Select which is react-select component (eg. it should be category = [1,3], when 'one' and 'three' were chosen). I tried many combination but none of them worked so far. I prefer to use ES6 without any external libraries/helpers to do that.
handleMultiChange(selectedOptions) {
this.setState({
data: {
...this.state.data,
categories: selectedOptions
}
})
}
I have this array:
myArray: [{
name: "Name1",
subArray: [{
name: "Subname1",
value: 1
}]
}, {
name: "Name2",
subArray: [{
name: "Subname2",
value: 2
}]
}, {
name: "Name3",
subArray: [{
name: "Subname3",
value: 3
}, {
name: "Subname4",
value: 4
}]
}, ]
I am using this array in a Vue app, but this should not be vue-specific.
In a dropdown I am showing all the values from the parent array (Name1, Name2, Name3). So far, so good. In Vue I do it like so:
<option v-for="array in myArray">
But, when the user has selected the parent array, I have another dropdown below, which should show the children of the selected object. So if the user selects Name3, there should be two options in my other dropdown with the two subArray's values.
How can I achive this?
Try using
<option v-for="option in myArray[index].subArray">
where index is index of your first option.
I'm having trouble understanding why my Angular <select> doesn't add the default value to the category I want.
I have an object that is returned from our database in Parse; the object is like this ( this is the "selected" option ):
$scope.item.category = { id: 'uosDHIF', className: 'Category', name: 'Projects' }
And I have a list of categories also:
$scope.categories = [{ id: 'uosDHIF', className: 'Category', name: 'Games' }, { id: 'uosDHIF', className: 'Category', name: 'Random' }, { id: 'uosDHIF', className: 'Category', name: 'Projects' }]
In my HTML what I have it's a select like this:
<select name="category" class="form-control mb-10" ng-model="item.category" ng-options="category.name for category in categories"></select>
I can select a new category and it's assigned to the item, and then I can save the item with item.save() but what I have trouble doing is that the selected (ng-model) doesn't seem to work, when I enter the page the first time I always get the default blank option even if I have the category when I check in the console.
Also, I was able to make it work with a simple object that I have created myself, but this object is returned from our database in Parse, so I'm not sure if this is the problem or I'm just missing something in there.
Thank you for your help.
Note: I have read other StackOverflow problems similar to mine but they doesn't help with mine.
In fact, on ng-options, you have to specify the value for the model (category as category.name => you choose category for ng-model but display it by his name).
The matching occurs by reference so you need the same object (category : $scope.categories[0]).
You can try:
JS
$scope.categories = [
{ id: 'uosDHIF', className: 'Category', name: 'Games' },
{ id: 'uosDHIF', className: 'Category', name: 'Random' },
{ id: 'uosDHIF', className: 'Category', name: 'Projects' }
];
$scope.item = {
category : $scope.categories[0]
};
HTML
<select name="category" class="form-control mb-10" ng-model="item.category" ng-options="category as category.name for category in categories"></select>
Please change the html as below.. Hope this is helpful.
ng-model="item.category.id" ng-options="category.id as category.name for category in categories">
http://jsfiddle.net/WcJbu/
When I select a person, I want the favoriteThing selector to display their current selection.
<div ng-controller='MyController'>
<select ng-model='data.selectedPerson' ng-options='person.name for person in data.people'></select>
<span ...> likes </span>
<select ... ng-model='data.favoriteThing' ng-options='thing.name for thing in data.things'></select>
</div>
$scope.data.people = [{
name: 'Tom',
id: 1,
favorite_thing_id: 1
}, {
name: 'Jill',
id: 2,
favorite_thing_id: 3
}];
$scope.data.things = [{
name: 'Snails',
id: 1
}, {
name: 'Puppies',
id: 2
}, {
name: 'Flowers',
id: 3
}];
Do I need to set up a service and add watches, or is there a [good] way to use the favorite_thing_id directly in the select?
Change the second select to this:
<select ng-show='data.selectedPerson' ng-model='data.selectedPerson.favorite_thing_id'
ng-options='thing.id as thing.name for thing in data.things'></select>
Adding the thing.id as to the ng-options will allow you to select the data.things entries based on their id's instead of their references. Changing the ng-model to data.selectedPerson.favorite_thing_id will make angular automatically change to the correct option based on selectedPerson.favorite_thing_id.
jsfiddle: http://jsfiddle.net/bmleite/4Qf63/
http://jsfiddle.net/4Qf63/2/ does what I want - but it's pretty unsatisfying.
$scope.$watch(function() {
return $scope.data.selectedPerson;
}, function(newValue) {
if (newValue) {
$scope.data.thing = $filter('filter')($scope.data.things, {id: newValue.favorite_thing_id})[0];
}
})
I'd like to see all of that be possible from within the select statement.
Maybe I'll try to write a directive.
association = {key: matchValue}
So that I can do
<select ... ng-model='data.thing' ng-options='t.name for t in data.things' association='{id: "data.selectedPerson.favorite_thing_id"}'></select>