handlebars.js: change content dynamically on select change - javascript

I'm trying to change content based on a select field change.
"Monthly" will be the default option on page load. If the user changes the select value to "yearly", I want to replace regularPrice with the yearly one (based on the selected amount of users).
Is there some way I can dynamically change the pricingOption? For example, from {{pricingOptions.monthly.regularPrice}} to {{pricingOptions.yearly.regularPrice}} and also show the correct price based on the selected amount of users?
Is this possible with handlebars.js?
Thanks!
<select>
<option>Pricing</option>
<option value="monthly">Monthly</option>
<option value="yearly">Yearly</option>
</select>
<select>
<option>Number of users</option>
{{#each pricingOptions.monthly}}
<option value="{{id}}">{{optionLabel}}</option>
{{/each}}
</select>
<span>{{pricingOptions.monthly.regularPrice}}</span>
var productList = {
pricingOptions: {
monthly: [
{
id: 1,
optionLabel: "1 user",
regularPrice: 10.00
},
{
id: 2,
optionLabel: "2 users",
regularPrice: 20.00
}
],
yearly: [
{
id: 1,
optionLabel: "1 user",
regularPrice: 100.00
},
{
id: 2,
optionLabel: "2 users",
regularPrice: 200.00
}
]
}
}

Related

Showing selected option in dropdown with opt-group on page load AngularJS is not working

When I try to show default selected value it doesn't show up i.e the option does not get selected in dropdown. The default value is coming from database and I'm setting that value in the model variable pageData.fields[content.id].keyFollowing is the sample JSON that I'm using to populate the dropdown:
$scope.dropdownFields = [{
groupName: 'PAGE',
isOptDisabled: false,
items: [{
name: 'PageName1',
type: 'page'
},
{
name: 'PageName2',
type: 'page'
},
{
name: 'PageName3',
type: 'page'
},
{
name: 'PageName4',
type: 'page'
}
]
},
{
groupName: 'COLOR',
isOptDisabled: false,
items: [{
name: 'COLOR1',
type: 'component'
},
{
name: 'COLOR2',
type: 'component'
},
{
name: 'COLOR3',
type: 'component'
}
]
},
{
groupName: 'OTHERS',
items: [{
name: 'Bold',
type: 'others',
isOptDisabled: false,
itemList: [{
name: 'Yes',
value: true
},
{
name: 'No',
value: false
}
]
},
{
name: 'Italic',
type: 'others',
isOptDisabled: false,
itemList: [{
name: 'Yes',
value: true
},
{
name: 'No',
value: false
}
]
}
]
}
];
<select id="{{content.id}}_filter" ng-model="pageData.fields[content.id].key" class="form-control" ng-change="onChangeFilter(pageData.fields[content.id].key, content.id)">
<option value="">[Select an option]</option>
<optgroup ng-repeat="header in dropdownFields" label="{{ header.groupName }}">
<option ng-repeat="item in header.items" value="{{ item.name }}" ng-disabled="isDisabled(header.groupName, item.name)">{{ item.name}}
</option>
</optgroup>
</select>
Is there any way to do this as I've researched a lot on this but the solutions were with ng-options and I cannot use ng-options for creating the dropdown due the disability functionality. The AngularJS version that I'm using is 1.2Any suggestion into the direction will be appreciated. Thanks.
EDIT: The code is successfully populating the dropdown and I'm able to get the value of selected option as well. But I'm not able to set an option by default into the dropdown. For eg. PageName3 is already selected in the dropdown.
EDIT2: So far now I'm able to show default value selected in this combobox on button click(here's the plnk) but I'm not able to set this value when I redirect from another page to this page.
So it goes like this, on this page(say PAGE1) I fill in these values there are multiple such dropdowns and textboxes in front of them for values, then I pass these values to the next page(say PAGE2); on PAGE2 I have a back button on the click of this button I return to PAGE1 with the same values passed before and I've to set all these values back as it were before. This is where I'm stuck! Not able to set selected values in dropdown while setting textboxes is done.
You can add default option into dropdown like so:
<input type="checkbox" ng-model="selected"></label><br/>
<select ng-model="item.name" ng-click="onChangeFilter(item.name)" class="form-control" >
<optgroup ng-repeat="header in dropdownFields" label="{{ header.groupName }}">
<option ng-selected="selected">Greetings!</option>
<option ng-repeat="item in header.items">{{item.name}}</option>
</optgroup>
</select>
plunker: http://plnkr.co/edit/vszVo3BHEA3T4yxGSUkA?p=preview

i need to given state and district details in same select box with ngFor angular 5

This is my json value,
{
"location": [{
"state": "state1",
"cities": [{
"city1": "city1"
},
{
"city2": "city2"
}
]
},
{
"state": "state2",
"cities": [{
"city1": "city1"
},
{
"city2": "city2"
},
{
"city3": "city"
}
]
}
]
}
sample output in select box:
state1 - state name - parent
city1 - city name - child
city2
state2 - state name - parent
city1 - city name - child
city2
city3
<select>
<option *ngFor="let locations of location">
{{locations.state}}{{locations.cities.citiname}}
</option>
<select>
it is not multiselect. it is like grouping by state under cities.
Thanks in advance.
You can use optgroup attribute for select element.
<select>
<optgroup *ngFor="let location of locations" [label]="location.state">
<option *ngFor="let city of location.cities">{{Utils.keys(city)[0]}}</option>
</optgroup>
</select>
Typescript
Utils = {
keys : Object.keys
}
You cannot use directly Object.keys because Object is a part of window/global and angular cannot evaluate that expression.

AngularJs populate second dropdown based on first dropdown

I have two select input, first one contain countryName, i want to populate the StateName to the second select input depending on the CountryName that is chosen i.e the stateName for the selected country only.
I bind the countryName from the countryData and the State from State Data but I want the StateData to contain item based on the selected country
<select ng-model="selectedItem.CountryId" class="form-control"
ng-options="item._id as item.CountryName for item in countryData">
<option value="">Select</option>
</select>
<select ng-model="selectedItem.StateId" class="form-control"
ng-options="item._id as item.StateName for item in stateData">
<option value="">Select</option>
</select>
Here is how my stateData looks
[
{
"StateName": "State1",
"CountryName": "Country1",
},
{
"StateName": "State2",
"CountryName": "Country1",
},
{
"StateName": "State3",
"CountryName": "Country2",
},
{
"StateName": "State4",
"CountryName": "Country3",
},
{
"StateName": "State5",
"CountryName": "Country2",
},
{
"StateName": "State6",
"CountryName": "Country3",
}
]
You can disable the second drop down until the first is selected. You also need to change your JSON so that the states sit in an array. The second dropdown will only populate once you have selected a country and will then be enabled. -updated
<select ng-options="item.country for item in list" ng-model="selectedCountry"></select>
<select ng-disabled="selectedCountry === {}" ng-options="item.state for item in selectedCountry.states" ng-model="selectedState"></select>
https://jsfiddle.net/Kratos_SA/hjz27yb0/3/

Filter angular dropdown function depending of what you select previously

I am trying to filter an ng-options dropdown depending of what you select in the previous one. This is what I am trying to achieve
If you choose Internal Tier 1 then show all company tiers
If you choose Internal Tier 2 show all except 1 - Partner Branded
If you choose Internal Tier 3 show only 3b- Answer Branded
This is my actual code.
$scope.companyData = {
Category: 0,
InternalTierId: 0
};
$scope.lookUps = {
companyTier: [
{ Id: 1, Name: '1 - Partner Branded'},
{ Id: 2, Name: '2 - Co-branded'},
{ Id: 3, Name: '3a - Answer Branded'},
{ Id: 4, Name: '3b - Answer Branded'}
],
internalTier: [
{ Id: 1, Name: 'Tier 1' },
{ Id: 2, Name: 'Tier 2' },
{ Id: 3, Name: 'Tier 3' }
]};
And these are the dropdowns. I cannot change the ng-model since I am using that object properties.
<select class="form-control" name="companyinternaltier"
ng-required="true" ng-model="companyData.InternalTierId"
ng-options="item.Id as item.Name for item in lookUps.internalTier">
<option value="">- Select Internal Tier Level -</option>
<select class="form-control" name="companytier" ng-required="true"
ng-model="companyData.Category" ng-options="item.Id as item.Name for
item in lookUps.companyTier | filter: filterTiers()">
<option value="">- Select Branding Tier Level -</option></select>
I put filterTiers() function after the filter word because I think I could create a function to do that but I dont know how to handle it
I appreciate any kind of help. Thanks
You can use ng-change option.See in the Plunker

Set selection options depending on another select element's value in AngularJS

I nearly struggled as much naming this question as I am with the actual problem! I have two selects:
Select 1:
<select ng-change="bankSelected()" ng-model="user.bankName">
<option selected value="">Select</option>
<option ng-repeat="bank in banks" value="{{bank.name}}">{{bank.name}}</option>
</select>
Select 2:
<select ng-model="user.branch">
<option selected value="">Select</option>
<option ng-repeat="// what to do??"></option>
</select>
The 'bankSelected()' function in my controller:
$scope.bankSelected = function () {
console.log('Bank selected: ' + $scope.user.bankName);
}
I have a JSON file that I import all the bank objects from, here's an example:
{
"banks" : [
{
"name" : "Bank A",
"branches" : [
{
"name" : "Branch 1",
"code" : "1"
},
{
"name" : "Branch 2",
"code" : "2"
}
]
},
{
"name" : "Bank B",
"branches" : [
{
"name" : "Branch 3",
"code" : "3"
},
{
"name" : "Branch 4",
"code" : "4"
},
{
"name" : "Branch 5",
"code" : "5"
}
]
}
]
}
The JSON that I'm actually using though is about 1000 lines long. So my problem, is that if the user selects 'Bank A' in the first select box, I want the second select box to display 'Branch 1' and 'Branch 2'. Likewise if the user selects 'Bank B', I want to display 'Branch 3', 'Branch 4', and 'Branch 5'. If the user has not selected anything in the first select (e.g. no Bank selected), then the second select (branches) shouldn't contain anything. I'm sure you understand what I'm getting at?
How can I make this happen in AngularJS?
bank ng-repeat
<select ng-model="user.bankName">
<option selected value="">Select</option>
<option ng-repeat="bank in banks" value="{{bank.name}}">{{bank.name}}</option>
</select>
branch ng-repeat
<select ng-model="user.branch" ng-show="user.bankName">
<option selected value="">Select</option>
<option ng-repeat="branch in getBranches(user.bankName)" value="{{branch.code}}">{{ branch.name }}</option>
</select>
source of the branch repeat is assign to getBranches() function in the scope and here we pass the bank name which selected before.
in that function
$scope.getBranches = function(selectedBank) {
// get the selected bank object from the banks array
var filteredBank = $filter('filter')($scope.banks, selectedBank);
// return the branches of the selected bank
return filteredBank[0].branches;
};
don't forget to inject the $filter service as below
app.controller('CtrlName', function($scope, $filter) {...
here is the DEMO
If you can change your select to something like below it will be more cleaner :)
this will select the whole object of the selected option.
<select ng-model="user.bankName" ng-options="bank.name for bank in banks">
</select>
here we can use selected bank object to get the branches as user.bankName.branches.
<select ng-model="user.branch" ng-if="user.bankName" ng-options="branch.code as branch.name for branch in user.bankName.branches">
</select>
so we can get rid of the getBranches().
here is the DEMO

Categories