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>
Related
Having a reusable Radio button component, when the options are using the same value for name it works fine:
const drinks = [
{
label: "Coffee",
name: "a"
},
{
label: "Tea",
name: "a"
},
{
label: "Water",
name: "a",
disabled: true
}
];
But when they are different values, it doesn't work fine, it lets the user select multiple options:
const drinks = [
{
label: "Coffee",
name: "1"
},
{
label: "Tea",
name: "2"
},
{
label: "Water",
name: "3",
disabled: true
}
];
Here is a working sandbox of it as it's complicated to create a working example here: https://codesandbox.io/s/custom-radio-button-group-forked-1do5u4?file=/src/App.tsx
It is working as expected. If it's a radio button, then it's ONE name and multiple possible values. Only one of them can be selected at a time.
const drinks = [
{
label: "Coffee",
name: "drinkType"
},
{
label: "Tea",
name: "drinkType"
},
{
label: "Water",
name: "drinkType",
disabled: true
}
];
As i mentioned in comment,
the code is working as expected
const drinks = [
{
label: "Coffee",
name: "a"
},
{
label: "Tea",
name: "a"
},
{
label: "Water",
name: "a",
disabled: true
}
];
the name attribute is used to group radio buttons,and only one radio button in the group can be selected at a time.
I am using angularjs dropdown multiselect,I have a problem when I am trying to set default selection of the dropdown when the selection limit is 1 it's not working.
and that's my code:
<div ng-dropdown-multiselect="" options="idPropertyData"
selected-model="idPropertyModel"
extra-settings="idPropertySettings">
</div>
//javascript
$scope.idPropertyModel = [{
"id": 1
}];
$scope.idPropertyData = [ { id: 1, label: 'David' },
{ id: 2, label: 'Jhon'
}, { id: 3, label: 'Danny' }, ];
$scope.idPropertySettings = {
selectionLimit: 1,
};
How can I solve this problem?
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
The idea is that the user selects a date from a calendar, available time slots are displayed, and upon selecting an available timeslot, the time slot will be blocked to cancel duplicate timeslot selection, and added to the database.
I am using MVC.NET, WebAPI, EntityFramework and angularJS.
my time slots are an array:
$("input").click(function () {
$('.datepicker').pickadate()
$scope.hours = {};
$scope.hours = [
{
id: 1,
name: '12:00'
},
{
id: 2,
name: '13:00'
},
{
id: 3,
name: '14:00'
},
{
id: 4,
name: '15:00'
},
{
id: 5,
name: '16:00'
},
{
id: 6,
name: '17:00'
},
{
id: 7,
name: '18:00'
},
{
id: 8,
name: '19:00'
},
{
id: 9,
name: '20:00'
},
{
id: 10,
name: '21:00'
},
{
id: 11,
name: '22:00'
}
];});
view is simply retrieve the array with ng-options="hour.name as hour.name for hour in hours".
my questions are:
how can i block user selected timeslots using only angular?
is it possible to keep the code skinny on the backend, or is it better to sort such things on the server?
what way is the most efficient?
Cheers.
By using select2.js v4 plugin , how set the default selected value when I use a local array data for source?
for example with this code
var data_names = [{
id: 0,
text: "Henri",
}, {
id: 1,
text: "John",
}, {
id: 2,
text: "Victor",
}, {
id: 3,
text: "Marie",
}];
$('select').select2({
data: data_names,
});
How set id 3 as the default selected value?
$('.select').select2({
data: data_names,
}).select2("val",3);
this worked for me with V4.0.3
$('.select').select2({
data: data_names,
})
$('select').val(3);
$('select').trigger('change.select2');
It is better you send another attribute (selected in my case below) for select and use it to set the default value. I did something like below -
var data_names = [{
id: 0,
text: "Henri",
}, {
id: 1,
text: "John",
}, {
id: 2,
text: "Victor",
}, {
id: 3,
text: "Marie",
selected: true
}];
then do
$(".select").select2({
data : data_names
});
data_names.forEach(function(name){
if(name.selected) {
$(".select").select2('val',name.id);
}
});
It's worked for me.
$('#select').select2({data: data_names}).val(3).trigger('change')