Dropdown cascade of interlocked items - javascript

I want to do a drop-down cascade with dependent choice, like here http://jsfiddle.net/6eCZC/1/.
But I have a table which items are in a part of a part of a table.
Like this:
$scope.option = [
{id: 1, name: "WebSite",
countries: [{id: 1, name: "Country",
servers: [{id: 1, name: "Server1"},
{id: 2, name: "Server2"},
{id: 3, name: "Server3"}]}]}];
$scope.selectedRequest = {};
$scope.selectedRequest.option = $scope.option[0];
and my HTML
<select name="site" ng-model="selectedRequest.site" ng-options="site.name for site in option" required></select>
<select name="country" ng-model="selectedRequest.country" ng-options="country.name for country in selectedRequest.option.countries">
</select>
<select name="server" ng-model="selectedRequest.server" ng-options="server.name for server in selectedRequest.option.countries.servers">
</select>
It works for the site and the country but not for the servers.

Use previously selected object's content when you are selecting.
Here is the working code (with some new options):
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.option = [{
id: 1,
name: "WebSite",
countries: [{
id: 1,
name: "Switzerland",
servers: [{
id: 1,
name: "Sw Server1"
}, {
id: 2,
name: "Sw Server2"
}, {
id: 3,
name: "Sw Server3"
}]
}, {
id: 2,
name: "Hungary",
servers: [{
id: 1,
name: "Hu Server1"
}, {
id: 2,
name: "Hu Server2"
}]
}]
}];
$scope.selectedRequest = {};
$scope.selectedRequest.option = $scope.option[0];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<select name="site" ng-model="selectedRequest.site" ng-options="site.name for site in option" required></select>
<select name="country" ng-model="selectedRequest.country" ng-options="country.name for country in selectedRequest.site.countries"></select>
<select name="server" ng-model="selectedRequest.server" ng-options="server.name for server in selectedRequest.country.servers"></select>
</div>
</div>
Best,
Peter

Related

Sort a list of products save in localstorage with JavaScript change event listener

I have saved a list of products in localstorgae and I want all my products to be displayed in descending order when I click on one of the combobox items
const _UserData = [
{ id: 1, pic: "img/113677817.jpg", title: "کیسه بوکس", price: 159.000 },
{ id: 2, pic: "img/hand.jpg", title: "دستکش بوکس", price: 389.000 },
{ id: 3, pic: "img/hat.jpg", title: "کلاه تکواندو", price: 120.000 },
{ id: 4, pic: "img/tekvando.jpg", title: "لباس کاراته", price: 100.000 },
{ id: 5, pic: "img/nanchico.jpg", title: "نانچیکو", price: 230.500 },
{ id: 6, pic: "img/gel.jpg", title: "محافظ لثه", price: 42.000 },
{ id: 7, pic: "img/hogo.jpg", title: "هوگو تکواندو", price: 150.000 },
{ id: 8, pic: "img/ktg.jpg", title: "نقاب تکواندو", price: 160.000 },
{ id: 9, pic: "img/kongfu.jpg", title: "لباس کنگفو", price: 216.500 },
{ id: 10, pic: "img/band.jpg", title: "کمربند تکواندو", price: 27.000 },
{ id: 11, pic: "img/short.jpg", title: "شورت ووشو", price: 351.000 }
];
newFunction();
console.log(_UserData);
function newFunction() {
_UserData.sort(function (a, b) {
if (a.title.localeCompare(b.title)==-1) {
return -1;
}
else {
return 1;
}
});
}
<div class="select d-flex justify-content-start align-items-center m-5">
<select name="format" id="sort">
<option selected disabled>جستجو بر اساس</option>
<option value="dec-price">قیمت-نزولی</option>
<option value="inc-price">قیمت-صعودی</option>
<option value="dec-title">عنوان-نزولی</option>
<option value="inc-title">عنوان-صعودی</option>
</select>
</div>
> Blockquote
For those looking for an answer,
I used the onchange event for the select tag and my problem was solved

knockout - how to use option and foreach bindings together

I have an ajax data that comes from server and with this data i should generate select boxes.
please look at this code:
var dataCameFromServer = {
foo: "1",
bar: "sag",
results: [
{
slectedBoxID: null,
selectBoxOptions: [
{
id: 1,
name: "mosi"
},
{
id: 2,
name: "azi"
},
{
id: 3,
name: "mom"
},
{
id: 4,
name: "dad"
}
]
},
{
slectedBoxID: 2,
selectBoxOptions: [
{
id: 1,
name: "tehran"
},
{
id: 2,
name: "masal"
},
{
id: 3,
name: "gilan"
},
{
id: 4,
name: "rasht"
}
]
},
{
slectedBoxID: 1,
selectBoxOptions: [
{
id: 1,
name: "adidas"
},
{
id: 2,
name: "nike"
},
{
id: 3,
name: "rebook"
},
{
id: 4,
name: "puma"
}
]
}
]
};
function selectViewModel() {
var self = this;
this.data = ko.observable(dataCameFromServer);
this.sbValue = ko.observableArray();
ko.computed(function() {
$.each(self.data().results, function(i,v) {
self.sbValue.push(v.slectedBoxID);
});
});
ko.computed(function(){
console.log(self.sbValue());
});
}
ko.applyBindings(new selectViewModel(), $("#wrapper")[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapepr">
<!-- ko with: data -->
<!-- ko foreach : results -->
<select data-bind="options:selectBoxOptions,optionsText: 'name',optionsValue: 'id',value: $root.sbValue()[$index],optionsCaption: 'Choose...'"></select>
<!-- /ko -->
<!-- /ko -->
</div>
I want my select boxes by default selected by the option that is in slectedBoxID and if my selectbox changed then the value of that corresponding slectedBoxIDchange.
is there any advice to do that?
p.s: I don't know how many results come from the server, it's not just this three results!
simplest way is to use ko.mapping plugin
or you can manually make each array object properties to observable.
var dataCameFromServer = { foo: "1", bar: "sag", results: [{ slectedBoxID: null, selectBoxOptions: [{ id: 1, name: "mosi" }, { id: 2, name: "azi" }, { id: 3, name: "mom" }, { id: 4, name: "dad" } ] }, { slectedBoxID: 2, selectBoxOptions: [{ id: 1, name: "tehran" }, { id: 2, name: "masal" }, { id: 3, name: "gilan" }, { id: 4, name: "rasht" } ] }, { slectedBoxID: 1, selectBoxOptions: [{ id: 1, name: "adidas" }, { id: 2, name: "nike" }, { id: 3, name: "rebook" }, { id: 4, name: "puma" } ] } ] };
function selectViewModel() {
var self = this;
// using ko.mapping
this.data = ko.mapping.fromJS(dataCameFromServer);
this.sbValue = self.data.results().map(v => v.slectedBoxID);
}
ko.applyBindings(new selectViewModel(), $("#wrapper")[0]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<div id="wrapepr">
<!-- ko with: data -->
<!-- ko foreach: results -->
<select data-bind="options:selectBoxOptions,optionsText: 'name',optionsValue: 'id',value: slectedBoxID,optionsCaption: 'Choose...'"></select>
<!-- /ko -->
<!-- /ko -->
</div>
<pre data-bind="text: ko.toJSON(sbValue, null, 2)"></pre>

Filter dropdown with ng-options from ng-options selection

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 Branding Tiers
If you choose Internal Tier 2 show all Branding Tiers > 1
If you choose Internal Tier 3 show Branding Tier 3b
This is my actual code.
$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
<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
On:
<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>
it seems that you already have where to store the selected value.
ng-model="companyData.InternalTierId"
What I'll do in the controller is:
First:
separate the companyTier's object:
companyTier: [
{ Id: 1, VisibilityRange: 1, Name: 'Partner Branded'},
{ Id: 2, VisibilityRange: 2, Name: 'Co-branded'},
{ Id: 3, VisibilityRange: 2, Name: 'Answer Branded'},
{ Id: 4, VisibilityRange: 3, Name: 'Answer Branded'}
]
Then:
Add the function to filter the objects.
$scope.filterTiers = function(companyTier) {
return (companyTier.VisibilityRange >= companyData.InternalTierId );
};
Controller will look like this after changes:
$scope.lookUps = {
companyTier: [
{ Id: 1, VisibilityRange: 1, Name: 'Partner Branded'},
{ Id: 2, VisibilityRange: 2, Name: 'Co-branded'},
{ Id: 3, VisibilityRange: 2, Name: 'Answer Branded'},
{ Id: 4, VisibilityRange: 3, Name: 'Answer Branded'}
],
internalTier: [
{ Id: 1, Name: 'Tier 1' },
{ Id: 2, Name: 'Tier 2' },
{ Id: 3, Name: 'Tier 3' }
]
};
$scope.filterTiers = function(companyTier) {
return (companyTier.VisibilityRange >= companyData.InternalTierId );
};
And the view something like this:
<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>
<select class="form-control" name="companytier" ng-required="true"
ng-model="companyData.Category" ng-options="item.Name for item in (lookUps.companyTier | filter: tierFilter)">
<option value="">- Select Branding Tier Level -</option></select>
Here is a working JSFiddle using your code, which should match your requirement.
Hope this helps.
HTML
<div ng-controller="myController">
<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 ng-show="companyData.InternalTierId == 0"
value="">- Select Internal Tier Level -</option>
</select>
<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 | filterTiers:companyData.InternalTierId"
>
<option ng-show="companyData.Category == 0"
value="">- Select Branding Tier Level -</option>
</select>
</div>
JS
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope) {
$scope.companyData = {};
$scope.companyData.Category = 0;
$scope.companyData.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' }
]
};
});
myApp.filter('filterTiers', function() {
return function(item, InternalTierId) {
if (!item) {
return null;
}
var arr = [];
for (var i in item) {
if (item[i].Id >= InternalTierId) {
arr.push(item[i]);
}
}
return arr;
};
});
Here is the markup
<div ng-app="soExample" ng-controller="dependantSelections" class="selections">
<select ng-model="lookUps.companyTier" ng-options="selection.name for selection in lookUps.internalTier" ng-change="showTier(lookUps.companyTier)">
<option value="">Please select a tier</option>
</select>
<select ng-model="lookUps.internalTier" ng-options="selection.name for selection in lookUps.internalTier | filter: lookUps.filter" ng-change="somethingElse(lookUps.companyTier)" ng-if="currentSelection">
<option value="">Please select an option</option>
</select>
</div>
Here is the Angular
var soExample = angular.module('soExample', []);
soExample.controller('dependantSelections', function($scope) {
'use strict';
$scope.currentSelection = null;
$scope.lookUps = {
companyTier: [{
id: 1,
group: 1,
name: '1 - Partner Branded'
}, {
id: 2,
group: 2,
name: '2 - Co-branded'
}, {
id: 3,
group: 3,
name: '3a - Answer Branded'
}, {
id: 4,
group: 3,
name: '3b - Answer Branded'
}],
internalTier: [{
id: 1,
group: 1,
name: 'Tier 1'
}, {
id: 2,
group: 2,
name: 'Tier 2'
}, {
id: 3,
group: 3,
name: 'Tier 3'
}],
filter: function(curTier) {
return curTier === $scope.currentSelection;
}
};
function showTier(tier) {
$scope.currentSelection = tier;
}
function somethingElse(next) {
alert(next.name)
}
$scope.showTier = showTier;
$scope.somethingElse = somethingElse;
});
Here is the live demo for your debugging pleasure ;)
http://codepen.io/nicholasabrams/pen/EKyJLX

How to Multiple Default Select Option in AngularJS?

I'd like to have multiple default selected option in AngularJs.
In my controller code:
$scope.selectedFvs = ['fvid9', 'fvid2'];
$scope.fields = [{
id: 'fid1',
name: 'f name 1',
fieldValues: [{
id: 'fvid1',
name: 'fv name 1',
}, {
id: 'fvid2',
name: 'fv name 2'
}]
}, {
id: 'fid2',
name: 'f name 2',
fieldValues: [{
id: 'fvid3',
name: 'fv name 3',
}, {
id: 'fvid4',
name: 'fv name 4'
}, {
id: 'fvid5',
name: 'fv name 5',
}, {
id: 'fvid6',
name: 'fv name 6'
}]
}, {
id: 'fid3',
name: 'f name 3',
fieldValues: [{
id: 'fvid7',
name: 'fv name 7',
}, {
id: 'fvid8',
name: 'fv name 8'
}, {
id: 'fvid9',
name: 'fv name 9',
}]
}];
In HTML code:
<div ng-repeat="field in fields">
<label>{{::field.name}}</label>
<select ng-init="fields[field.id] = selectedFvs[1]" ng-model="fields[field.id]">
<option value="select-all">Select All</option>
<option ng-repeat="fieldValue in field.fieldValues" value="{{::fieldValue.id}}">{{fieldValue.name}}</option>
</select>
</div>
This renders with 'fv name 5' as default selected field value because in the HTML code, the select tag, the ng-init is set to the second index of selectedFvs:
However, this is not what I want. What I really want is the 3 selects have the default value of selectedFvs. It would look like this if it works,
Here is the Plunker link to this code.
Use $index as follows
<div ng-repeat="field in fields">
<label>{{::field.name}}</label>
<select ng-init="fields[field.id] = (selectedFvs|findselected: field.fieldValues)" ng-model="fields[field.id]">
<option value="select-all">Select All</option>
<option ng-repeat="fieldValue in field.fieldValues" value="{{::fieldValue.id}}">{{fieldValue.name}}</option>
</select>
</div>
Uae this filter as well
app.filter("findselected", function() { // register new filter
return function(inputs, fields) { // filter arguments
var selected = '';
angular.forEach(inputs, function(val1){
angular.forEach(fields, function(val2){
if(val1 === val2.id){
selected = val1;
}
})
});
return selected;
};
});
See this Plunker
Use selectedFvs[$index] instead of selectedFvs[1]

Knockout databind dropdown depending on other dropdown

I'm trying to databind 2 dropdowns, where the 2nd dropdown is dependent on what is chosen in the first.
I have this data scructure:
{
EducationId: 1,
EducationCategories:[{
Name: "Category1",
Educations: [{
Id: 1,
Name: "Education1"
}, {
Id: 2,
Name: "Education2"
}]
}, {
Name: "Category2",
Educations: [{
Id: 3,
Name: "Education3"
}, {
Id: 4,
Name: "Education4"
}]
}]
}
This i wanna databind to 2 different "selects" with knockout, so that i have 1 dropdown with all category names, and a 2nd with educations.
EducationId referes to the education that is selected, so in the data example first dropdown would be "Category1", and second would be "Education1".
But how can i make that the 2nd dropdown only gets populated with the educations belonging to the category selected in the first dropdown? and then bind the value(id) of the 2nd dropdown to EducationId.
The data gets mapped by the knockout mapping plugin.
Use a computed property to update the second drop-down when the selected value in the first changes.
For example:
var data = {
EducationId: 1,
EducationCategories :[{
Name: "Category name1",
Educations: [{
Id: 1,
Name: "Education name1"
}, {
Id: 2,
Name: "Education name2"
}]
}, {
Name: "Category name2",
Educations: [{
Id: 3,
Name: "Education name3"
}, {
Id: 4,
Name: "Education name4"
}]
}]
};
var viewModel = ko.mapping.fromJS(data);
viewModel.selectedCategory = ko.observable();
viewModel.Educations = ko.computed(function() {
if (viewModel.selectedCategory()) {
return viewModel.selectedCategory().Educations();
}
});
viewModel.selectedEducation = ko.observable();
ko.applyBindings(viewModel);
<script src="https:////cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="http:////cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<select data-bind="options: EducationCategories, value: selectedCategory, optionsText: 'Name'"></select>
<select data-bind="options: Educations, value: selectedEducation, optionsText: 'Name'"></select>

Categories

Resources