How do I hide the div class if the value chosen in the select option is usd ?
app.html
<select name="" id="" class="form-control" value.bind="">
<option repeat.for="option of Options" model.bind="option.value">
${option.name}
</option>
</select>
<div class="row">
<!-- enter code here -->
</div>
app.ts
export class Test {
Option = [
{ value: 'usd', name: 'america'},
{ value: 'cad', name: 'canada money'}
];
}
I agree with Rajkumar you should really make some more effort trying to work this out. You do not even have the code for the basic select, the code for which is all over the internet, an example : https://ilikekillnerds.com/2015/10/working-with-forms-in-aurelia/
That said I will try and help:
<template>
<form role="form">
<select value.bind="selectedVal">
<option repeat.for="option of someOptions"
model.bind="option">${option.name}</option>
</select>
</form>
</template>
<div class="row" show.bind="selectedVal === 'usd'">
UsD SeLeCtEd
</div>
<div class="row" show.bind="selectedVal !== 'usd'">
Other SeLeCtEd
</div>
The above should show only the "usd selected" content when you select USD, and "other selected" when you select anything else. This is not the best way of doing it but should work.
Related
I am making a dropdown and want to show the div class="residential-options" when the id="residential" is selected and show the div class="commercial-options" when the id="commercial" is selected.
heres my HTML:
<div class= "row">
<select id='building-type'>
<option disabled selected value> -- select an option -- </option>
<option id="residential" value="residential" [...]>Residential</option>
<option id="commercial" value="commercial " [...]>Commercial</option>
<option id="corporate" value="corporate" [...]>Corporate</option>
<option id="hybrid" value="hybrid" [...]>Hybrid</option>
</select>
</div>
<div class="residential-options">
<div id="number-of-apartments" >
<label>N. of Apartments *</label>
<input [...]>
</div>
<div id="number-of-basements" >
<label>N. of Basements *</label>
<input [...]>
</div>
</div>
<div class="commercial-options">
<div id="number-of-floors" >
<label>N. of Floors *</label>
<input [...]>
</div>
heres my jQuery:
$("#building-type").change(function() {
($('#residential').is(':checked'))
$('.residential-options').show();
$('.commercial-options').hide();
$('.corporate-options').hide();
$('.hybrid-options').hide()
});
$("#building-type").trigger("change");
$("#building-type").change(function() {
($('#commercial').is(':checked'))
$('.commercial-options').show();
$('.residential-options').hide();
$('.corporate-options').hide();
$('.hybrid-options').hide()
});
$("#building-type").trigger("change");
it only shows the div class="commercial-options" whatever I click on. Thanks for your help!
Your code can be simplified greatly, including removing the .trigger() calls.
$("#building-type").change(function() {
$('div[class*="options"]').hide(); // hide all '*-option' divs
// Determine which option was selected and display the corresponding div:
['residential', 'commercial', 'corporate', 'hybrid'].forEach(function(base){
if ($('#' + base + ':checked').length) {
$(`.${base}-options`).show();
}
})
})
you can change your code to something like this:-
get the selected value from the building type .
compare the value using if, else if statements and inside if / else if statements show and hide your div's using class attribute.
It's very simple. I have 2 selects. When the user selects the category, it will appear another select with a subcategory.
The problem is that subcategory select is always empty.
Category JSON (vm.categories):
[
{
"doctype":"1120",
"description":"bla bla",
"subcategories":[
{
"#id":1,
"subcategory":"1",
"description":"New Offer",
"templates":[
{
"template":"12",
"description":"asfafasga",
"deliveryChannels":[
]
}
]
},
{
"#id":2,
"subcategory":"2",
"description":"New Offer",
"templates":[
{
"template":"1121",
"description":"asfag",
"deliveryChannels":[
{
"deliveryType":"4",
"description":"Test"
}
]
}
]
}
]
}
]
HTML
<div class="row">
<div class="col-sm-12">
<!-- Categories -->
<label for="category-select"><b>Category </b></label>
<select name="category-select" ng-model="vm.selectedCategory" required>
<option value="" disabled>--- Please select a category ---</option> <!-- not selected / blank option -->
<option value="{{category}}"
ng-repeat="category in vm.categories">
{{category.description}}
</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<!-- Sub Categories -->
<label ng-show="vm.selectedCategory" for="subcategory-select"><b>Sub-Category </b></label>
<select name="subcategory-select"
ng-show="vm.selectedCategory"
ng-model="vm.selectedSubCategory">
<option value="" disabled>--- Please select a sub-category ---</option> <!-- not selected / blank option -->
<option value="{{subCategory}}"
ng-repeat="subCategory in vm.selectedCategory.subcategories">
{{subCategory.description}}
</option>
</select>
</div>
</div>
Any idea why this is happening? Somehow I can't read the subcategories array from the selected category
EDIT: If I put <span>{{vm.selectedCategory}}</span> in my html, it shows the json above. but if I put <span>{{vm.selectedCategory.subcategories}}</span> it's null
Another edit: Even <span>{{vm.selectedCategory.doctype}}</span> is null
It is because your selected value is not evaluated as object but as string. To handle this issue you can:
You can either convert selected string to object with ng-change directive on first select and the following function
$scope.convert = function(){
$scope.vm.selectedCategory = angular.fromJson($scope.vm.selectedCategory)
}
or use ng-options
<select name="mySelect" id="mySelect" ng-options="category.description for category in data" ng-model="vm.selectedCategory">
</select>
Demo
To make a working demo, had to simplify vm.[namedVariables] into simple variables: kindly check below
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.selectedCategory = '';
$scope.categories = [{
"doctype": "1120",
"description": "bla bla",
"subcategories": [{
"#id": 1,
"subcategory": "1",
"description": "New Offer",
"templates": [{
"template": "12",
"description": "asfafasga",
"deliveryChannels": [
]
}]
},
{
"#id": 2,
"subcategory": "2",
"description": "New Offer2",
"templates": [{
"template": "1121",
"description": "asfag",
"deliveryChannels": [{
"deliveryType": "4",
"description": "Test"
}]
}]
}
]
}];
/*
for(var i=0; i<$scope.profiles.length; i++){
console.log($scope.profiles[0].TravelerExtended);
console.log($scope.profiles[0].TravelerExtended.ExtendedInt_1);
}
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat='item in categories'>
{{item.description}}
<div ng-repeat='subC in item.subcategories'>
{{subC.subcategory}} - {{subC.description}}
</div>
</div>
<hr/>
<div class="row">
<div class="col-sm-12">
<!-- Categories -->
<label for="category-select"><b>Category </b></label>
<select name="category-select" ng-model="selectedCategory" required>
<option value="" disabled>--- Please select a category ---</option>
<!-- not selected / blank option -->
<option value="{{category.doctype}}" ng-repeat="category in categories">{{category.description}}</option>
</select>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<!-- Sub Categories -->
<label ng-show="selectedCategory" for="subcategory-select"><b>Sub-Category </b></label>
<ng-container ng-repeat="item in categories">
<!--
<p>(1) {{selectedCategory}} </p>
<p>(2) {{item.doctype}} </p>
-->
<select name="subcategory-select" ng-show="selectedCategory == item.doctype" ng-model="vm.selectedSubCategory">
<option value="" disabled>--- Please select a sub-category ---</option>
<!-- not selected / blank option -->
<option value="{{subCategory}}" ng-repeat="subCategory in item.subcategories">
{{subCategory.description}}</option>
</select>
</ng-container>
</div>
</div>
</div>
Instead of using the value attribute with interpolation, use the ng-value directive:
<div class="row">
<div class="col-sm-12">
<!-- Categories -->
<label for="category-select"><b>Category </b></label>
<select name="category-select" ng-model="vm.selectedCategory" required>
<option value="" disabled>--- Please select a category ---</option> <!-- not selected / blank option -->
̶<̶o̶p̶t̶i̶o̶n̶ ̶v̶a̶l̶u̶e̶=̶"̶{̶{̶c̶a̶t̶e̶g̶o̶r̶y̶}̶}̶"̶
<option ng-value="category"
ng-repeat="category in vm.categories">
{{category.description}}
</option>
</select>
</div>
</div>
The double curly bracket interpolation directive attempts to convert the category value to a string. This does not work well when the category value is an object.
For more information, see AngularJS ng-value Directive API Reference.
It says [Object Object] when I do <span>{{vm.selectedCategory}}</span> and i can't read the subcategories
Pipe the vm.selectedCategory into the json filter:
<span>{{ vm.selectedCategory | json }}</span>
This allows you to convert a JavaScript object into JSON string.
This filter is mostly useful for debugging. When using the double curly notation the binding is automatically converted to JSON.
For more information, see AngularJS json Filter API Reference.
I have a product which has a category, and while editing product I would like to display current category in dropdown ofcourse. And if user wants to change category in dropdown it is ok, but on load I would like to show selected current product's value.
Here is my html
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Products category:</label>
<div class="col-xs-9">
<select id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.groupId">
<option [value]="helperService.IsItEmptyGuid()" [selected]="isDefaultSelected()">-/-</option>
<option [value]="group.id" *ngFor="let group of mainGroups" [selected]="group.id==='a0e25215-a60e-4444-b6ac-4521b7de4b37'">{{group.title}}</option>
</select>
{{article.mainGroup.id}}
</div>
</div>
When I run my app and open this form, as you can see I put {{article.mainGroup.id}} <- it's binded article to check is there id of category, and when I open form it looks like this:
So obliviously {{article.mainGroup.id}} holds a value, but I can not force <select> to display that value as selected...
Any help would be awesome, thanks a lot !
EDIT:
It's doing nothing, just selecting -/- if product has no group because then article.mainGroup.id would be empty guid..
isDefaultSelected() {
return this._globalHelperService.isEmptyGuid(this.article.mainGroup.id);
}
EDIT 2: By following Pranay Rana example, here is what I did :
1.) Select article
2.) Open modal
3.) Image when modal is opened:
As you can see, value is there, but nothing is selected in a modal.
Here is original code, not only img:
<div class="form-group">
<label class="control-label dash-control-label col-xs-3">Group:</label>
<div class="col-xs-9">
<select touch-enter-directive [ref]="ref" [nextFocusElement]="articleSubGroup" id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.mainGroup.id">
<option [ngValue]="null">-/-</option>
<option [ngValue]="group.id" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
{{article.mainGroup.id}}
</div>
</div>
Probably select2 is making an issue?
Thanks
do like this
<select id="mainGroupSelectEdit" class="form-control dash-form-control select2" style="width: 100%;"
data-minimum-results-for-search="Infinity" name="mainGroupSelectEdit" required (change)="filterSubById(article.groupId)" [(ngModel)]="article.groupId">
<option [ngValue]="null" >-/-</option>
<option [ngValue]="group.id" *ngFor="let group of mainGroups">{{group.title}}</option>
</select>
In angular [select] is not needed it will select option based on id value you pass as [(ngModel)] to select element,also no need of emptyguid if your value is null then default option will get selected
So I need to entirely change a group of drop downs that appear based on the selection of one dropdown. I believe ngChange is the way to go about it, but I am not entirely sure how to change between two sets of divs (or if that is even the best way of doing it.
So I have this dropdown:
<div class="input-group" theme="bootstrap" style="">
<label>Product Type</label>
<select class="dropdown-menu scrollable-menu form-control" style="" ng-model="event.etype" ng-change="setOptions()" id="etype">
<option value="" selected disabled>Select a Product</option>
<option ng-click="type = 'x'">X</option>
<option ng-click="type = 'y'">Y</option>
<option ng-click="type = 'z'">Z</option>
<option ng-click="type = 'q'">Q</option>
<option ng-click="type = 'w'">W</option>
</select>
</div>
If the choice is X, I need one set of drop downs (contained in one row), and if it is anything else, I need an entirely different set (contained in another row).
Here are how the drop downs look:
<div class="col-lg-3">
<label>Numbers</label>
<ui-select-match placeholder="Select Numbers">{{$item.admin_user.name}}</ui-select-match>
<ui-select-choices repeat="a in ams"> {{a.admin_user.name}} </ui-select-choices>
</ui-select>
</div>
</div>
<div class="row col-lg-12" id="nonX">
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Super Heroes</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="superhero" id="script">
<option value="" selected disabled>Select Superhero</option>
<option ng-repeat="superhero in superheroes" ng-value={{superhero}} ng-click="selectHeroe(superhero)">{{superhero.name}}</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="row col-lg-12" id="noniPad">
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Screen</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="event.screen" id="screen">
<option value="" selected disabled>Select Screen</option>
<option ng-repeat="screen in screens" ng-value={{screen}} ng-click="selectScreen(screen)">{{screen.name}}</option>
</select>
</div>
</div>
<div class="col-lg-3">
<div class="input-group" theme="bootstrap">
<label>Misc Asset</label>
<select class="dropdown-menu scrollable-menu form-control" ng-model="event.miscasset" id="miscasset">
<option value="" selected disabled>Select Misc Asset</option>
<option ng-repeat="miscasset in miscassets" ng-value={{miscasset}} ng-click="slectMiscAsset(miscasset)">{{miscasset.name}}</option>
</select>
</div>
</div>
</div>
<div class="row m-b-sm m-t-sm"></div>
</div>
The separate drop downs both appear in different rows. So I would need one row to appear if they select iPad and one row to appear if they do not select an iPad.
I would love some help. Thank you!
Your best option would be to set the dropdowns of each one depending on the parent selection. There's no need to create a duplicate div to hold both sets of dropdows.
I removed all css classes and any other markup not relevant to the ng-change to make it clearer.
Your parent dropdown would look like this:
<div>
<label>Product Type</label>
<select ng-model="event.etype" ng-change="setOptions(event.etype)">
<option value="">Select a Product</option>
<option ng-repeat="etype in etypes" ng-value="etype" ng-bind="etype"></option>
</select>
</div>
Take special notice of how the setOptions handler is being passed the ng-model value. This means when an option is selected, it'll automatically set ng-model="event.etype" to the value of that option.
To support this behavior in your controller you need to provide the array of event types:
$scope.etypes = ['gif', 'photo', 'ipad', 'video', 'print'];
Then, on your setOptions method you'll get the selected option and filter your descendant dropdowns
var options1 = [{
etype: 'ipad',
value: '1'
}, {
etype: 'gif',
value: '2'
}];
$scope.setOptions = function (etype) {
$scope.scripts = options1.filter(function (item) {
return item.etype == etype;
});
};
What this means is that setOptions will set the descendant dropdowns based on the etype value passed in. In this example I'm limiting to $scope.scripts only but you can set as many as needeed. As you can see options1 is just an array which contains the etype property which I need to filter against.
Finally on your descendant dropdowns you would use the filtered options:
<select ng-model="event.script">
<option value="" selected disabled>Select Script</option>
<option ng-repeat="script in scripts" ng-value="script.value" ng-bind="script.value"></option>
</select>
Using ng-hide="event.etype == null || event.etype=='ipad'" and ng-show="event.etype == 'ipad'" on the row tags solved my issue!
I want to display the selected items in a label or list.
I am using switch to switch between form and result. Please see the code below
<div ng-switch on="format">
<div ng-switch-when="form">
<div class="floatLeft">Seeeeeelect</div>
<select multiple="multiple" ng-model="test">
<!--<option value ="sdfsdf" ng-repeat="n in ['a','b','c']">{{n}}</option>-->
<option value ="AAA">AAA</option>
<option value ="BBB">BBB</option>
<option value ="CCC">CCC</option>
</select>
{{test}}
</div>
<div ng-switch-when="result">{{test}}</div>
</div>
<button ng-click="showForm()">Form</button>
<button ng-click="showPreview()">Result</button>
In controller i have the method like below,
$scope.showPreview=function() {
$scope.format='result';
};
$scope.showForm=function() {
$scope.format='form';
};
After selecting the items in list, when i try to switch to see the "result" by tapping "Result" button. The selected item is not populating.
Can anyone tell me where i went wrong.
Thanks
The ng-switch creates sub-scopes. So you have to reference test by $parent.test.
<select multiple="multiple" ng-model="$parent.test">
<div ng-switch-when="result">{{ $parent.test }}</div>
</select>
{{ $parent.test }}
</div>
fiddle