$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
based on above list, below is what I normally use:
<select ng-options="item in items" ng-model="selected"></select>
Very straightforward, as in, I can access the value by using item.xxx
But what is the syntax below:
<select ng-options="item as item.label for item in items" ng-model="selected"></select>
I am totally blur, the as and for keyword is for what purpose? I could not really find the doc that explain this, please help.
PS:
Original syntax is <select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select> but I removed track by, because I understand that by reading from the doc.
Here's the options list which <select> should refer to populate options.
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
When you write ng-options="item as item.label for item in items", you are iterating over items, where each item is assigned to item by using item in items.
So for 1st iteration, item's value will be:
{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}
Note that item is an object in this case.
<option> doesn't care about how you're fetching data for it, it only cares about what it needs to show and assign what value when it's selected. So, we tell ng-options using for that take item as input and generate corresponding <option> elements.
Now in select option, suppose you want your input to be id. But hey, who knows what is the meaning of your id, to be human readable you would want to display some meaning message to identify it, which is label in this case.
So, instead of using the entire object, you will use only it's id while using label to identify it(text displayed in dropdown).
Now your code changes to:
ng-options="item.id as item.label for item in items"
So the final generated HTML becomes something like this:
<select>
<option value="1">aLabel</option>
<option value="2">bLabel</option>
</select>
<select ng-options="item as item.label for item in items" ng-model="selected"></select> is almost similar in functionality to
<select ng-options="item in items" ng-model="selected"></select>
But here the first one is giving more clarity to the framework
in item as item.label for item in items,
'as': item as item.label is telling that in the options of select tag show item.label, but item.label representing whole object item. Which means that even though the option is showing only item.label in DOM, the other properties (id, subtype etc) are also accessible using the ng-model (or selected option)
'for': Here for item in items comes because when mentioning item as item.label the DOM has no idea what is this item. So this is clearly saying that the item in the statement of item.label is an object in the object array $scope.items (or simply itmes in term of DOM)
You can find the official documentation in the ngOptions directive https://docs.angularjs.org/api/ng/directive/ngOptions
Related
I've been trying to test out a way in vue to build a select list with a hardcoded array of options, however, if a certain async response/event comes in with an assignee attached, I am setting that as 'currentAssignee' which is my preselected option.
This kind of works, but it initially looks empty/invisible. If I click the seemingly non-existent select box, the options will show 'Name One', 'Name Two' and 'John Doe' which is the name from the response. But it doesn't actually satisfy the 'selected' option because it is essentially invisible to the user on page load, until it's clicked
Should I be doing something different?
<select class="firstLastNames linkBox" v-model="currentAssignee" #change="changeAssignee()" >
<option :selected="true">{{currentAssigneeFirst}} {{currentAssigneeLast}}</option>
<option v-for="assignee in assigneeOptions" >{{assignee.email}}</option>
</select>
data () {
return {
currentAssignee: '',
assigneeOptions: [
{id: 0, email: "Name one"},
{id: 1, email: "Name two"}
],
},
}
/**further down, I set currentAssignee based on async event**/
this.currentAssignee = triggerEvent[0].assignee;
I put a code sample together here which I think fixes your issue:
https://codepen.io/timfranklin/pen/bGWYggG
Take a look at what is being bound by the v-model. The "value" of a select is not the object itself, it's some value of an object.
<select class="firstLastNames linkBox" v-model="currentAssignee" #change="changeAssignee($event)" >
<option disabled >Choose One</option>
<option v-for="assignee in assigneeOptions" :key="assignee.id" :value="assignee.id">{{assignee.email}}</option>
</select>
The important note here is the :value="assignee.id";
I'm new to react and I'm designing a drop down menu which receives its info from an API using axios:
axios.get('/api/jobs/list-tags',{headers:headers}).then(respo =>{
console.log(respo.data)
this.setState({tagsList:respo.data})
})
this is the shape of the data:
Object { id: 1, name: "MongoDB" }
Object { id: 2, name: "JavaScript" }
I want to show this data in a drop down list using react-select:
<Select placeholder='Select from pre-created Tags 'onChange={handleDropDown('Tags')} defaultValue={values.Tags} required options={this.state.tagsList} />
but this doesnt display any item in the drop down list and only shows the blank boxes. how can I actually display the data in a row in the list items?
like: JavaScript,...
you can do like this
<Select
placeholder="Select from pre-created Tags "
onChange={e => handleDropDown(e.target.value)}
required
value={this.state.tag}
>
<options value=''>Select</options>
{this.state.tagsList.map(tags => (
<options key={tags.id} value={tags.name}>
{tags.name}
</options>
))}
</Select>;
and the handleDropDown function like
handleDropDown = tag => {
this.setState({ tag });
};
react-select expects options data in {value: ..., label: ..., //more fields} format only.
label is displayed on the dropdown options.
(which if needed, can be formatted with the prop formatOptionLabel)
and value uniquely identifies an option.
with a prop onChange you get the whole object back on select. (if losing that is what you are concerned about)
Coming back to your example --
{ id: 1, name: "MongoDB" }
You can .map() on the result array and convert it to any of the below formats:
{value: 1, label: "MongoDB"}, and in the onChange convert back to earlier.
{value: 1, label: "MongoDB", id: 1, name: "MongoDB"} and omit the value & label keys-values in onChange handler.
Preferably, if the values (here, id and name) are closely associated then approach 1 should be chosen.
I have an array of objects like this
UserList = [
{name:'user1',id:1,data:{}},
{name:'user4',id:4,data:{}},
{name:'user7',id:7,data:{}}
]
And html select like this
<select ng-model="data.selectedUser">
<option ng-repeat="item in data.items" value="{{item.id}}">{{item.name}}</option>
</select>
<p>{{data.userPhone}}</p>
Inside my controller I use
$scope.data = {};
$scope.data.selectedUser = 0;
$scope.data.items = UserListModel.items;
$scope.data.userPhone = UserListModel.items[$scope.data.selectedUser].phone;
Is there a way to update selected user phone on selectedUser change without using $watch and stuffing the "$scope.data.userPhone" inside it?
Imagine you have a data like this:
$scope.data = {};
//set the data
$scope.data= [{
id: 1,
name: "cyril",
phone: "1234567"
}, {
id: 2,
name: "josh",
phone: "1237"
}, {
id: 3,
name: "sim",
phone: "4567"
}];
//selected hold the object that is selected in the selectbox.
$scope.selected = $scope.data[0];
Your html will look like this below so now when you select the new user from the list it will be updated in the model selectedItem, the selectedItem has the phone number in it (so you dont need a watch to update phone number seperately as you doing).
<body ng-controller="MainCtrl">
<p>selected item is : {{selectedItem}}</p>
<p> name of selected item is : {{selectedItem.name}} </p>
<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>
</body>
working example here
One possibility would be to have
$scope.data.userPhone = function () {
return UserListModel.items[$scope.data.selectedUser].phone;
}
This would mean though that you'd have to update any bindings to use data.userPhone() instead.
This might be worse than using a watch though, as the function would get called during every digest.
Without knowing how selectedUser gets updated it's difficult to suggest a best way as, with most things, it depends.
I have an array of options, they are static and won't be changing my preference was to simply do a standard select with ng-model attached and then add my options. As far as I can tell this doesn't really work as the model does not bind. Fine. I'll do it the Angular way which is the first time I've seen the Angular way take so much more than any other way.
So I have my array
$scope.options = ['1', '2' 'Etc'];
Then the select:
<select ng-model="stupidAngular" ng-options="options as options for options in options"></select>
Is there a better way to bind the model to a select in angular?
Here is an example:
<select ng-model="selectedGroup" ng-options="group.title for group in groups">
<option value="">-- choose group --</option>
</select>
$scope.groups = [
{
title: "option 1"
},
{
title: "option 2"
},
{
title: "option 3"
}
];
There is also good documentation here.
I'm trying to select a default select option based on one of the property with which I'm populating my select option.
This code is copied straight from #rneimeyer's fiddle. I did tweak it to do what I wanted to do.
So, I have choices as my observableArray.
var choices = [
{ id: 1, name: "one", choice: false },
{ id: 2, name: "two", choice: true },
{ id: 3, name: "three", choice: false }
];
function ViewModel(choices, choice) {
this.choices = ko.observableArray(choices);
};
The difference between rneimeyer's fiddle and mine is that I have choice property added on my object inside the observableArray instead of having a separate observable for the option that we want to be default.
Here's the fiddle on my attempt.
Now I'm checking in my select element tag whether the choice attribute is true or not. And if it is then I want to set the name to the value attribute so that it becomes the default.
<select data-bind="options: choices, optionsText: 'name', value: choice"></select>
I've tested this with simple data model in my fiddle here as well which is working just as I wanted.
I guess what my real query is how to check choice property in the data-bind. I see that optionText is being able to access the name property just fine. Not sure why it isn't same for choice property in value attribute.
I might have misdirected to some people. Also, I apologize for not mentioning the version that I'm using. I'm currently using Knockout 3.0.0 (you'll see why this is important later)
Also, just to note that I'm not saying #XGreen's method is wrong but that wasn't exactly what I was looking for and this might be due to my poor explanation.
Let me first try to clarify what I was trying to accomplish.
First of all, I will be having an array of object with the information for the options.
[
{ id: 1, name: "one", choice: false },
{ id: 2, name: "two", choice: true },
{ id: 3, name: "three", choice: false }
]
Now, what I wanted to do was to data-bind select option to that array with choice true being the default selected one.
I'm not intending to create any extra observable except the array itself which is going to be an observableArray.
After much research I finally found optionsAfterRender attribute for options property in Knockout's Docs.
<select data-bind="options: choices,
optionsValue: 'name',
optionsAfterRender: $root.selectDefault">
</select>
So what optionsAfterRender really does is, on each array element it calls custom function which I've set to check if the choice is true or not and make the value of select option that which has the true.
Do note that ko.applyBindingsToNode does not work on version 2.2.0 which I had in my original fiddle.
function ViewModel(choices) {
this.choices = ko.observableArray(choices);
this.selectDefault = function(option,item){
if(item.choice){
ko.applyBindingsToNode(option.parentElement, {value: item.name}, item);
}
};
};
ko.applyBindings(new ViewModel(choices));
And here's the fiddle for it.
Ok If I understand you want to set the true choice as your default selected value.
First you need to involve id in your drop down so it becomes the value of the options as we will filter our collection based on that unique id
<select data-bind="options: choices, optionsText: 'name', optionsValue: 'id', value: selectedChoice"></select>
As you see now you need to create a new observable called selectedChoice and we are going to populate that observable with the choice that is true using a computed.
var choices = [
{ id: 1, name: "one", choice: false },
{ id: 2, name: "two", choice: true },
{ id: 3, name: "three", choice: false }
];
function ViewModel(choices) {
var self = this;
self.choices = ko.observableArray(choices);
self.trueChoice = ko.computed(function(){
return ko.utils.arrayFirst(self.choices(), function(item){
return item.choice === true;
});
});
self.selectedChoice = ko.observable(self.trueChoice().id);
};
ko.applyBindings(new ViewModel(choices));
the new computed property trueChoice uses the arrayFirst method in order to return the first item in your choices collection that has its choice property set to true.
Now that we have our true choice all we have to do is to set the selected value of the dropdown aka selectedChoice to be the id of that true choice so the item becomes selected in the drop down.
Here is also a working fiddle for this
Added a Gist that disabled the first option in a select drop down list, and work nicely with KO's optionsCaption binding, using a optionsDisableDefault binding:
https://gist.github.com/garrypas/d2e72a54162787aca345e9ce35713f1f
HTML:
<select data-bind="value: MyValueField,
options:OptionsList,
optionsText: 'name',
optionsValue: 'value',
optionsCaption: 'Select an option',
optionsDisableDefault: true">
</select>
You could create a computed that holds the selected items
self.selected_options = ko.computed({
read: function() {
return self.choices.filter(function(item){ return item.choice });
},
write: function(value) {
self.choices.forEach(function(item) { item.choice = value.indexOf(item) > 0;});
}
})
Then bind to that as the selected options.