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>
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>
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.
I have a dropdown list which is used for holding Email Templates . Now , I have categorized this into two types of Templates . One is 'User Generated Templates' and other 'System Generated Templates' .
I have the functionality to keep adding the Templates and they get populates into the Dropdown .
The important part here is to "Group" the Templates as 'Email' and 'System'. I have a condition that, Whenever "USER TEMPLATES" are added , they should be placed above the "system templates"
I need to do populate a Dropdown list such that it gets grouped according to the "User" and "System" templates with AngularJS . How do i do this ?
Seeking Help !
Assuming the following structure for the templates :
$scope.templates = [{
type: 'Email',
name: 'Template u1'
}, {
type: 'Email',
name: 'Template u2'
}, {
type: 'System',
name: 'Template s1'
}, {
type: 'Email',
name: 'Template u3'
}, {
type: 'System',
name: 'Template s2'
}, {
type: 'System',
name: 'Template s3'
}];
If you want to group them by type in the dropdown you will declare your select element like that :
<select ng-model="template" ng-options="template.name group by template.type for template in templates">
<option value=''>Select a template</option>
</select>
Refer to this fiddle
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>