How to Multiple Default Select Option in AngularJS? - javascript

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]

Related

KnockoutJS data-bind optionsCaption

var vm = {
WeatherId: ko.observable(),
WeatherConditions: [{
Id: '1',
Name: 'Sunny'
}, {
Id: '2',
Name: 'Rainy'
}, {
Id: '3',
Name: 'Cloudy'
}, {
Id: '4',
Name: 'Snowy'
}]
};
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<select data-bind="options: WeatherConditions,
value: WeatherId,
optionsText:'Name',
optionsCaption: 'Select today weather'">
</select>
I have this KO data bind snippet where I want to set optionsCaption to read as "Select today's weather". I wasn't able to inset the apostrophe in the middle - need help.
Escape the apostrophe with backslash \
optionsCaption: 'Select today\'s weather'">
var vm = {
WeatherId: ko.observable(),
WeatherConditions: [{
Id: '1',
Name: 'Sunny'
}, {
Id: '2',
Name: 'Rainy'
}, {
Id: '3',
Name: 'Cloudy'
}, {
Id: '4',
Name: 'Snowy'
}]
};
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<select data-bind="options: WeatherConditions,
value: WeatherId,
optionsText:'Name',
optionsCaption: 'Select today\'s weather'">
</select>
You just need to escape the ': today\'s:
var vm = {
WeatherId: ko.observable(),
WeatherConditions: [{
Id: '1',
Name: 'Sunny'
}, {
Id: '2',
Name: 'Rainy'
}, {
Id: '3',
Name: 'Cloudy'
}, {
Id: '4',
Name: 'Snowy'
}]
};
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<select data-bind="options: WeatherConditions,
value: WeatherId,
optionsText:'Name',
optionsCaption: 'Select today\'s weather'">
</select>
This isn't a KnockoutJS thing, it's a basic JavaScript thing. To put a ' in a '-quoted string, you use an escape: today\'s.
Remember, the content of the data-bind attribute is an JavaScript object initializer without the { and }, whose contents are evaluated within a series of with blocks to provide context. (Literally. Knockout builds the text of a function to do that, using as many with blocks as it needs for the nesting level, and with a return {" + theDataBindAttributeText}; at the end, then uses new Function to build a function from that, and calls it to get the bindings.)

Populate Dropdown 2 based on Dropdown 1 selection and how to iterate when I chose a suboption

Hello everyone I am working with ArgularJs 1.5. I need to populate Dropdown 2 based on Dropdown 1 selection, to show it only if it exists (if DropDown 1 selected had dropDown 2) else don't show Dropdown 2 (deactivate it) and show the values of dropDown selected (either of dropDown 1 or of dropDown 2) into my table.
In this case I have a dropDown 1 named city which has 3 subcity (dropdown 2) I would like to show them when I select city and iterate values (matrix) when I chose one subcity like subcity02
<div ng-app="app" ng-controller="MainController">
<select ng-model="selectedCity" ng-options="x as (x | cityFilter) for (x, y) in cities">
</select>
<select ng-model="selectedSubCity" ng-options="x as (x | cityFilter) for (x, y) in selectedCity.subCity">
</select>
</div>
<table>
<tr ng-repeat="item in selectedCity"><!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
</tr>
</table>
and this is my script js:
angular.module('app', [])
.filter('cityFilter', function() {
return function(city) {
return city.replace('_', ' ');
}
})
.controller('MainController', ['$scope', function($scope) {
$scope.cities = {
city : [
{id:'c01' , name:'name1', price:15},
{id:'c02' , name:'name2', price:18},
{id:'c03' , name:'name3', price:11},
{subCity01 : [
{id:'sub01' , name:'nameSub1', price:1},
{id:'sub02' , name:'nameSub2', price:8},
{id:'sub03' , name:'nameSub3', price:1},
],
subCity02 : [
{id:'ssub01' , name:'nameSsub1', price:1},
{id:'ssub02' , name:'nameSsub2', price:8},
{id:'ssub03' , name:'nameSsub3', price:4},
],
subCity03 : [
{id:'sssub01' , name:'nameSssub1', price:1},
{id:'sssub02' , name:'nameSssub2', price:2},
{id:'sssub03' , name:'nameSssub3', price:1},
]
},
],
city_02 : [
{id:'cc01' , name:'name11', price:10},
{id:'cc02' , name:'name22', price:14},
{id:'cc03' , name:'name33', price:11},
],
city_03 : [
{id:'ccc01' , name:'name111', price:19},
{id:'ccc02' , name:'name222', price:18},
{id:'ccc03' , name:'name333', price:10},
]
};
this don't fix my issue I can't see the dropDown 2 and I can't iterate its values. Anybody could help me please.
So the first issue here is the data structure - it will not allow you simulate the expected behavior the way it is, so I changed it a little bit:
$scope.cities = [
{
name: "city A",
elements: [{
id: 'c01',
name: 'name1',
price: 15
}, {
id: 'c02',
name: 'name2',
price: 18
}, {
id: 'c03',
name: 'name3',
price: 11
}],
subsities: [ {
name: "sub A1",
elements: [{
id: 'sub01',
name: 'nameSub1',
price: 1
}, {
id: 'sub02',
name: 'nameSub2',
price: 8
}, {
id: 'sub03',
name: 'nameSub3',
price: 1
} ]
},
{
name: "sub A2",
elements: [{
id: 'ssub01',
name: 'nameSsub1',
price: 1
}, {
id: 'ssub02',
name: 'nameSsub2',
price: 8
}, {
id: 'ssub03',
name: 'nameSsub3',
price: 4
} ]
},
{
name: "sub A3",
elements: [{
id: 'sssub01',
name: 'nameSssub1',
price: 1
}, {
id: 'sssub02',
name: 'nameSssub2',
price: 2
}, {
id: 'sssub03',
name: 'nameSssub3',
price: 1
}]
}
]
},
{
name: "city B",
elements: [{
id: 'cc01',
name: 'name11',
price: 10
}, {
id: 'cc02',
name: 'name22',
price: 14
}, {
id: 'cc03',
name: 'name33',
price: 11
} ]
},
{
name: "city C",
elements: [{
id: 'ccc01',
name: 'name111',
price: 19
}, {
id: 'ccc02',
name: 'name222',
price: 18
}, {
id: 'ccc03',
name: 'name333',
price: 10
} ]
}
];
Second change: I added ng-change event on both dropdowns and the HTML is now :
<body ng-controller="MainCtrl">
<select ng-model="selectedCity" ng-change="extractSubsities(selectedCity)" ng-options="item as item.name for item in cities track by item.name">
</select>
<select ng-show="selectedCity.subsities" ng-model="selectedSubCity" ng-change="extractSubsities(selectedSubCity)" ng-options="item2 as item2.name for item2 in selectedCity.subsities track by item2.name">
</select>
<table>
<tr ng-repeat="item3 in data track by item3.id">
<!--but here I need to iterat the selectedSubCity too when I select DropDown 2-->
<td>{{ item3.id }}</td>
<td>{{ item3.name }}</td>
<td>{{ item3.price }}</td>
</tr>
</table>
</body>
And third - the change event:
$scope.extractSubsities = function(itemSelected) {
if(itemSelected && itemSelected.elements){
$scope.data = itemSelected.elements;
}
}
A full working demo is here

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

Dropdown cascade of interlocked items

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

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