This regards javascript knockouts
HTML
If run this row i get [Object, object]
<p><select data-bind="options: availableRole"></select></p>
If i run this row i get nothing
<p><select data-bind="options: availableRoles, value: availableRoles().title, optionText: 'availableRoles().title'"></select></p>
JAVASCRIPT
self.availableRoles = [
{ title: "Programmer" },
{ title: "Designer" }
];
How can i show the title programmer and designer?
You can use the optionsText binding to bind to a child value as described in the documentation:
<select data-bind="options: availableRoles, optionsText: 'title'"></select>
You can see a working example here.
You should provide property name in optionsText binding:
<select data-bind="options: availableRoles, optionText: 'title'"></select>
<select data-bind="options: availableRoles, optionsText: 'title', optionsCaption: 'Choose...'"></select>
For more on this, see: The "options" binding
One thing that all of these answers is missing is the ability to track what role you have selected in your view model. For this, you use the value binding in addition to the options binding.
Here's a working jsfiddle:
And here's the code pasted in for convenience:
var viewModel = {
availableRoles: [
{ title: "Programmer"},
{ title: "Designer" }
],
selectedRole: ko.observable()
};
ko.applyBindings(viewModel);
<select data-bind="options: availableRoles, optionsText: 'title', optionsCaption: 'Select...', value: selectedRole"></select>
<pre data-bind="text: JSON.stringify(ko.toJS(selectedRole), null, 2)"></pre>
The solution is:
<select data-bind="options: availableRoles, optionsText: 'title'"></select>
Related
I have a filter drop down for some tabular data that reads data from a local storage item, the select tag is shown below, and below that is the code to add items to the select tag and the model for the filter.
The issue is that whilst the data filtered is correct when you refresh the page, the selected item only shows the correct value if the local storage value is true.
No matter what value the local storage item is selected="selected" is always added to the "Excluded from Search" option.
Can't for the life of me work out why, any help advice appreciated.
<select class="form-control form-control-sm" ng-model="filterSearch" ng-change="setFilterS()" id="theFilterS" >
<option ng-selected="{{option.value == filterSearch}}" ng-repeat="option in filterSearchOptions" value="{{option.value}}" >{{option.DisplayName}}</option>
</select>
$scope.filterSearch = localStorage.getItem("FilterSearch");
$scope.filterSearchOptions = [{
value: '',
DisplayName: 'All',
}, {
value: 'false',
DisplayName: 'Included in Search',
}, {
value: 'true',
DisplayName: 'Excluded from Search',
}];
You should try with the ng-options directive which IMO gives a simpler approach then ng-repeat
angular.module('app',[]).controller('testCtrl',function($scope){
$scope.filterSearch = 'true';
$scope.filterSearchOptions = [{
value: '',
DisplayName: 'All',
}, {
value: 'false',
DisplayName: 'Included in Search',
}, {
value: 'true',
DisplayName: 'Excluded from Search',
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="testCtrl">
<select
class="form-control form-control-sm"
ng-model="filterSearch"
ng-change="setFilterS()"
id="theFilterS"
ng-options="option.value as option.DisplayName for option in filterSearchOptions">
</select>
{{filterSearch}}
</div>
Is there any possible way to create a dropdown that has a diffrent icon from fontawesome for each individuel option value? Or can I change the brackground color of each value? I prefer the circle icon from fontawesome where I can change the color of every record in the list.
I tried to add the Fontawesomecode of an Icon in the html part
<select data-bind="options: someList, optionsText: 'dropdownItemName', optionsValue: 'dropdownItemId', value: selectedSomeList, optionsCaption: ''" style="font-family: FontAwesome"></select>
I also tried to add it into the a <i></i> tag but it does nothing.
Does someone have an idea? Thanks you for the help
You can add the Unicode for the icon in the optionText binding (Unicode values are specified for each icon on font-awesome's site):
var viewModel = function() {
this.values = ko.observableArray([{
text: 'address-book \uf2b9',
value: 1
}, {
text: 'bookmark \uf02e',
value: 2
}, {
text: 'location-arrow \uf124',
value: 3
}]);
this.selectedValue = ko.observable(2);
}
ko.applyBindings(new viewModel());
select {
font-family: 'FontAwesome', 'Second Font name'
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<select data-bind="options: values,
optionsText: 'text',
optionsValue: 'value',
value: selectedValue">
</select>
(I borrowed the idea from this answer. But, it was being displayed as instead of the icon. It took a while to figure out)
I might be late. But try this one. jsfiddle
var viewModel = function() {
this.values = ko.observableArray([{
text: 'Visa',
value: 1,
icon:'fa-cc-visa'
}, {
text: 'Discover',
value: 2,
icon:'fa-cc-discover'
}, {
text: 'Amex',
value: 3,
icon:'fa-cc-amex'
}]);
OptionsAfterRender = (option, item) => {
ko.applyBindingsToNode(option, { css: item.icon }, item);
};
this.selectedValue = ko.observable(2);
}
ko.applyBindings(new viewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<select style="font-family:fontAwesome" multiple="multiple" size="3" data-bind="options: values,
optionsText: 'text',
optionsValue: 'value',
value: selectedValue,
optionsAfterRender:OptionsAfterRender">
</select>
I want to create a list in which each option is a list itself, but when I try this, the select tag ends it prematurely. Can this be done at all in AngularJS 1.3?
<body ng-app="">
<select placeHolder="This">
<option>A place-holder!</option>
<option>
<select>
<option>A place-holder!</option>
</select>
</option>
<option>Greetings!</option>
</select>
</body>
Something like this, using optgroup creates a sub-group of option rather than a new list.
It's not a standard HTML component. You'll need a JS library that implements it. One I could find is selectivity.js but you would have to write a directive to integrate it with your angular app.
$('#select-with-sublist').selectivity({
allowClear: true,
items: [{
id: 'a',
text: 'A',
submenu: {
items: [
{ id: 'a1', text: 'A1' },
{ id: 'a2', text: 'A2' },
{ id: 'a3', text: 'A3' }
]
}
}, {
id: 'b',
text: 'B',
submenu: {
items: [
{ id: 'b1', text: 'B1' },
{ id: 'b2', text: 'B2' }
]
}
}],
placeholder: 'Select',
showSearchInputInDropdown: false
});
Working example: https://jsfiddle.net/LukaszWiktor/ge64o2ym/
Use <optgroup> instead of the inner select.
<body ng-app="">
<select placeHolder="This">
<option>A place-holder!</option>
<optgroup label="Inner list">
<option>A place-holder!</option>
<option>A place-holder!</option>
</optgroup>
<option>Greetings!</option>
</select>
</body>
This can be done using this example, its a Multi level drop-down menu in Bootstrap 3. Its better to use this since its more flexible. not restricted to two levels only.
Trying to get an option to be selected by default if selected is present on the option object
This is what i have:
<template>
<select v-model="model" :placeholder="placeholder">
<option v-for="option in options" :value="option.value" :selected="option.selected">{{option.label}}</option>
</select>
</template>
<script>
export default {
props: {
model: {
default: null
},
placeholder: {
default: null
},
options: {
default: null
}
}
};
</script>
This sets selected attribute correctly, i can see it in element explorer
This doesnt seem to work, since its only an attribute, if i check the element, the "selected" property on it is false!
How do i set selected property of the option element?
You just need to set the originally selected value to the value of the v-model, i.e.
new Vue({
el: '#app',
data: {
options: [
{
value: 'foo',
label: 'foo label',
},
{
value: 'bar',
label: 'bar label',
},
{
value: 'baz',
label: 'baz label',
},
],
selected: 'bar',
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<select v-model="selected">
<option v-for="option in options" :value="option.value">{{option.label}}</option>
</select>
</div>
Found the issue, the "data" property for my component was coming from somewhere else.
So i needed to find where it was coming from.
Consider this Javascript array of objects.
$scope.keyName = [{
'key': 'stringName',
'type': 'String',
'query': ['equalTo', 'notEqualTo', 'contains', 'startsWith', 'exists', 'doesNotExist']
}, {
'key': 'email',
'type': 'String',
'query': ['equalTo', 'notEqualTo', 'contains', 'startsWith', 'exists', 'doesNotExist']
}, {
'key': 'username',
'type': 'String',
'query': ['equalTo', 'notEqualTo', 'contains', 'startsWith', 'exists', 'doesNotExist']
}, {
'key': 'buzzInAccess',
'type': 'Boolean',
'query': ['exists', 'doesNotExist']
}]
I was trying something like this
<div class="col-sm-3">
<select name="a" class="form-control" ng-model="keyName">
<option ng-repeat="x in keyName track by $index" value="[[x]]">[[x.key]]</option>
</select>
</div>
<!--Query Parameter-->
<div class="col-sm-3">
<select name="search" ng-model="searchParam.query" class="form-control">
<option ng-repeat="y in keyName track by $index" value="y">[[y.query]]</option>
</select>
</div>
The second select has all the values in array form.
What I want to achieve is show two select dropdown. First select with key and second select has corresponding query values populated. This is done in Angular. How can I populate second select depending upon the corresponding key value.
Thanks for the help.
You should use ng-options. Following is the code depicting the same.
JSFiddle
<div>
<select ng-options="p.key for p in keyName" ng-model='selectedKey'></select>
<select ng-options="p for p in selectedKey.query" ng-model='selectedQuery'></select>
<span>{{keyName}}</span>
</div>