Cannot load option values in select in angularjs - javascript

When search_dropdown values are set, using the selected value as the index need to set the value of filterText dropdown.
<div class="form-group" data-ng-repeat="filter in filtersArray track by $index">
<select name="search_dropdown"
ng-model="search_dropdown[filter]"
class="form-control">
<option value="">Select Filter Field</option>
<option data-ng-repeat="t in list_fields" value="{{t.field}}">{{t.displayName}}</option>
</select>
<select name="filterText" class="form-control" ng-model="filterText[filter]">
<option value="">Select Filter Text</option>
<option data-ng-repeat="t in list['{{search_dropdown[filter]}}'] track by $index" value="{{t}}">{{t}}</option>
</select>
search_dropdown = ['name','description'] and the value of
list['name'] = ['A','B'] and list['description'] = ['C','D'] where list is an object.
<option data-ng-repeat="t in list['{{search_dropdown[filter]}}']
track by $index" value="{{t}}">{{t}}</option>
Here how to set the value of filterText dropdown with A,B when name is selected in search_dropdown and C,D when description is selected?

Related

AngularJS - Set the true or false or select one option

I want to set whatever I choose i want to save it to viewmodel but I can't figure out how to set option that I selected to ng-model. If nothing is selected value will be select one. Available options are YES (true) / NO (false). Thanks guys
<select automationid="APR" name="cost"
class="ddl"
ng-model="tempDefaultCost.cost"
ng-options="item.value as item.text for item in costFlyoutCtrl.trueFalseLookup">
<option value="">Select One</option>
</select>
If I understood your question correctly, You can add an extra option to select box which is disabled and selected:
with ng-repeat:
<select automationid="APR" name="cost" class="ddl" ng-model="$ctrl.selectedItem">
<option value="" disabled selected>Select one</option>
<option ng-repeat="x in $ctrl.items">{{x.label}}</option>
</select>
and also with ng-options:
<select automationid="APR" name="cost"
class="ddl"
ng-model="$ctrl.selectedItem"
ng-options="x.label for x in $ctrl.items">
<option value="" disabled selected>Select one</option>
</select>
And in your controller:
this.items = [{value: true, label: 'TRUE'}, {value: false, label: 'FALSE'}];
this.selectedItem;
DEMO

How to show/hide items from a select list based on another selection

In JavaScript, how to show/hide items from a select list based on another selected option that contain a certain word or words?
I am very new to JavaScript, so any help would be appreciated.
There are two drop-downs: "group" and "alph".
<select name="group">
<option value="Angry (Two)">Angry (Two)</option>
<option value="Happy (Two)">Happy (Two)</option>
<option value="Sad">Sad</option>
<option value="Tired (One)">Tired (One)</option>
</select>
<select name="alph">
<option value="ABC">ABC</option>
<option value="ABC-1">ABC-1</option>
<option value="ABC-2">ABC-2</option>
<option value="DEF">DEF</option>
<option value="DEF-1">DEF-1</option>
<option value="DEF-2">DEF-2</option>
<option value="DEF-3">DEF-3</option>
</select>
Without IDs, for the first dropdown (name group), if the selected value contains " (Two)", then the list will only show:
<select name="alph">
<option value="ABC-2">ABC-2</option>
<option value="DEF-2">DEF-2</option>
</select>
If the user changes selection, and the selected value contains " (One)", then the list will only show:
<select name="alph">
<option value="ABC-1">ABC-1</option>
<option value="DEF-1">DEF-1</option>
</select>
If the user changes selection, and the selected value does not contain neither " (One)" or " (Two)", then the list will show:
<select name="alph">
<option value="ABC">ABC</option>
<option value="DEF">DEF</option>
<option value="DEF-3">DEF-3</option>
</select>
Note: I am not able to add IDs or attributes. I can only access the name of the select and the value.
Use data-* to create groups, then use a querySelector to get all the options and test if they are apart of the group or not. If they are apart of the group show them otherwise hide them.
// The main group
let groups = document.querySelector('select[name=group]')
// Add a change event
groups.addEventListener('change', (e) => {
// Get the currently selected Group
let current = e.target.options[e.target.selectedIndex]
// Get the data-group number
let group = current.getAttribute('data-group')
// Get all the items from the second dropdown
let opts = Array.from(document.querySelectorAll('select[name=alph]>option'))
// Hide items that are not appart of the group
opts.forEach(itm => itm.style.display = itm.getAttribute('data-group') == group || !itm.getAttribute('data-group') ? 'initial' : 'none')
// Reset the the selection
document.querySelector('select[name=alph]').selectedIndex = 0
})
/* Hide option two items by default */
select[name=alph]>option[data-group]{display:none;}
<select name="group">
<option>Select One...</option>
<option data-group="1" value="Angry (Two)">Angry (Two)</option>
<option data-group="2" value="Happy (Two)">Happy (Two)</option>
<option data-group="3" value="Sad">Sad</option>
<option data-group="4" value="Tired (One)">Tired (One)</option>
</select>
<select name="alph">
<option>Select One...</option>
<option data-group="1" value="ABC">ABC</option>
<option data-group="1" value="ABC-1">ABC-1</option>
<option data-group="2" value="ABC-2">ABC-2</option>
<option data-group="2" value="DEF">DEF</option>
<option data-group="3" value="DEF-1">DEF-1</option>
<option data-group="3" value="DEF-2">DEF-2</option>
<option data-group="4" value="DEF-3">DEF-3</option>
</select>

How to trigger an expression on selecting an option in Angular

I have the following code wrapped in ng-repeat
<select class="selectpicker input input-halfwide">
<option disabled selected> -- Select your destination -- </option>
<option ng-repeat="(key, country) in home.List" value="key" ng-model="home.status.selectedOption">{{country.title}}
</option>
</select>
I want that when the user selects an option, to perform the expression home.doSomething() in the controller.
How can this be achieved?
You can do this with an ng-change on the select:
<select class="selectpicker input input-halfwide"
ng-model="home.status.selectedOption"
ng-change="home.doSomething()">
<option disabled selected> -- Select your destination -- </option>
<option ng-repeat="(key, country) in home.List" value="{{ key }}"
ng-selected="{{ key == home.status.selectedOption }}">
{{country.title}}
</option>
</select>
Also note that I moved the ng-model directive to the select instead of the option element.
A better practice would be to use the ng-options directive:
<select class="selectpicker input input-halfwide"
ng-model="home.status.selectedOption"
ng-change="home.doSomething()"
ng-options="country.id as country.name for country in home.List">
<option disabled selected> -- Select your destination -- </option>
</select>
you need to use ng-change to detect selection change and ng-model for the selected value on select.
<select class="selectpicker input input-halfwide" ng-change="home.doSomething()" ng-model="home.status.selectedOption">
<option disabled selected> -- Select your destination -- </option>
<option ng-repeat="(key, country) in home.List" value="key">{{country.title}}</option>
</select>
now, in your controller you can directly use the selected value using $scope
$scope.home.doSomething = function () {
// $scope.home.status.selectedOption
};

Dynamic select options in ng-repeat

I would like to have a dynamic select option values bind to select dropdown.
<div ng-repeat="condition in conditions">
<div class="form-group">
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="{{age.Description}}" ng-repeat="age in ageConditions">{{age.Description}}</option>
</select>
</div>
</div>
I like
age in ageConditions
to be dynamic. I also tried ng-options="dynamicOptions" but it always bind to the same list.
I want to achieve this with ng-repeat.
Repeat 1:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="ageCondition1">ageCondition1</option>
<option ng-value="ageCondition2">ageCondition2</option>
</select>
Repeat 2:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="yearsCondition1">yearsCondition1</option>
<option ng-value="yearsCondition2">yearsCondition2</option>
</select>
As shown i want the option in select to be dynamic in ng-repeat.
Any idea?
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option value="getValue(age, $parent.$index)" ng-repeat="age in ageConditions"> getText(age, $parent.index)</option>
</select>
Please note that $parent.$index is used.
the dynamic nature van be achieved used functions which return the value based in $index.
$scope.getValue = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
$scope.getText = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
hope this helps
Solved this by creating a directive that created a new scope for select.

AngularJS <select> not saving value in object?

I have this select element in a row (of which there can be a few) which represents an item. But the scope for manufacturer does not update when this is selected. The default for the item's manufacturer attribute is null (since when it's created - it no manufacturer has been selected yet)
<select ng-model="manufacturer" ng-options="manufacturers.name for manufacturers in manufacturers" ng-change="change()" class="ng-valid ng-dirty">
<option value="" selected="selected" class=""> --Select a Manufacturer--</option>
<option value="0">Choice1</option>
<option value="1">Choice2</option>
<option value="2">Choice3</option>
</select>
I guess my question is - how do I get the manufacturer attribute in the item to update with the select box?
Thanks!
If it helps - here's the scope of the cams item:
$scope.cams = [
{channels:1, manufacturer:null},
{channels:1, manufacturer:null}
];
Turns out ng-model="manufacturer" should have been ng-model="cam.manufacturer":
<select ng-model="cam.manufacturer" ng-options="manufacturers.name for manufacturers in manufacturers" ng-change="change()" class="ng-valid ng-dirty">
<option value="" selected="selected" class=""> --Select a Manufacturer--</option>
<option value="0">Choice1</option>
<option value="1">Choice2</option>
<option value="2">Choice3</option>
</select>
Now it works perfectly.
You could use this:
HTML
<selectmultiple ng-model="selectedValues">
<option ng-repeat="lang inLanguages" value="{{lang.name}}" ng-click="selected(selectedValues)">{{lang.name}}</option>
</select>
angularjs:
$scope.selected = function(nowSelected){
$scope.selectedValues = [];
if( ! nowSelected ){
return;
}
angular.forEach(nowSelected, function(val){
$scope.selectedValues.push(val);
});
};

Categories