Introduction
I am trying to develop 2 selection (drop-down) boxes that populates the second box depending on the first selection.
for example
Choose product 1 and the second box will then have format 1, 2 and 5.
choose product 2 and the second may have format 2, 3 and 6.
Problem and Question
The first box has been populated by my array, but the second box is not populating depending on the selection not the first, in fact its not populating at all (see screen shot.
HTML
<div class="form-group">
<div ng-controller="dropDown">
<select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
</select>
<select ng-model="formData.format" ng-if="user.productName"
ng-options="format.id as format.name for Format in user.productName.format">
</select>
</div>
</div>
controller.js
.controller('dropDown', function ($scope) {
$scope.productsandformats = [{
"name": "product 1",
"format": [{
"name": "format 1",
"id": "1"
}, {
"name": "format 2",
"id": "2"
}]
}, {
"name": "product 2",
"format": [{
"name": "format 3",
"id": "3"
},{
"name": "format 2",
"id": "2"
},
{
"name": "format 4",
"id": "4"
}, {
"name": "format 5",
"id": "5"
}]
}];
$scope.user = {productName: $scope.productsandformats[0], format: '1'};
$scope.displayModalValue = function () {
console.log($scope.user.productName);
}
})
Use this code ng-options="format.id as format.name for format in formData.ProductAndFormat.format" instead of your this code ng-options="format.id as format.name for format in user.productName.format"> on your second select box
var app = angular.module('anApp', []);
app.controller('dropDown', function ($scope) {
$scope.productsandformats = [{
"name": "product 1",
"format": [{
"name": "format 1",
"id": "1"
}, {
"name": "format 2",
"id": "2"
}]
}, {
"name": "product 2",
"format": [{
"name": "format 3",
"id": "3"
},{
"name": "format 2",
"id": "2"
},
{
"name": "format 4",
"id": "4"
}, {
"name": "format 5",
"id": "5"
}]
}];
$scope.formData={};
$scope.formData.ProductAndFormat = $scope.productsandformats[0];
$scope.displayModalValue = function () {
console.log($scope.user.productName);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="anApp" ng-controller="dropDown">
<div class="form-group">
<div ng-controller="dropDown">
<select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
</select>
<select ng-model="formData.format"
ng-options="format.id as format.name for format in formData.ProductAndFormat.format">
</select>
</div>
</div>
</div>
Related
I am trying to implement a country-city dependable drop-down using AngularJS
<div>
Country:
</br>
<select data-ng-model="country" ng-options="country.name for country in countries" data-ng-change="updateCountry(country)">
<option value="">Select country</option>
</select>
</div>
<div>
City</br>
<select data-ng-model="city" data-ng-options="city.name for city in countryItem">
<option value="">Select city</option>
</select>
</div>
Controller Code
$scope.updateCountry = function(selectedCountry)
{
console.log("The selected country is
"+JSON.stringify(selectedCountry));
HomeFactory.setTappedCountryData(selectedCountry);
$scope.countryItem = HomeFactory.getTappedCountryData();
console.log("The country Item is "+JSON.stringify($scope.countryItem));
}
Factory Code
function setTappedCountryData(data){
console.log(JSON.stringify(data));
selectedCountry = data;
};
function getTappedCountryData(data){
console.log(JSON.stringify(data));
return selectedCountry;
};
JSON Data
[{
"id": "1", "name":"USA",
"cities": [{
"id": "1",
"name": "New York"
}, {
"id": "2",
"name": "Los Angeles"
}]
}, {
"id": "2", "name":"UK",
"cities": [{
"id": "3",
"name": "London"
}, {
"id": "4",
"name": "Glasgow"
}]
},
{
"id": "3", "name":"Russia",
"cities": [{
"id": "5",
"name": "Moscow"
}, {
"id": "6",
"name": "St. Petersburg"
}]
},
{
"id": "4", "name":"Spain",
"cities": [{
"id": "7",
"name": "Madrid"
}, {
"id": "8",
"name": "Barcelona"
}]
},
{
"id": "5", "name":"India",
"cities": [{
"id": "9",
"name": "Delhi"
}, {
"id": "10",
"name": "Mumbai"
}]
}]
I cannot get the cities for a particular country in the 2nd dropdown. Where I am making mistake?
Hadi Jeddizahed has solved the problem
Only problem is the code is not working in Chrome develper mobile emulator ( for mobile device like iphone6, Nexus 6 etc)
Try like this.
you can also do this in controller in simple way
$scope.updateCountry = function(selectedCountry) {
$scope.countryItem = selectedCountry.cities
}
and in view similar to this
<select data-ng-model="city" data-ng-options="city.name for city in country.cities">
<option value="">Select city</option>
</select>
DEMO
I have the following data structure thats coming from an API.
$scope.cityList = [{
"_id": {
"$oid": "584ebd7f734d1d55b6dd4e5e"
},
"cityName": "New York",
"region": "north",
"people": [
{ "id": 1, "name": "x" },
{ "id": 2, "name": "y" },
{ "id": 3, "name": "z" },
{ "id": 4, "name": "a" },
{ "id": 5, "name": "b" },
{ "id": 6, "name": "c" }
]
},
{
"_id": {
"$oid": "584ebd7f734d1d55b6dd4e5e"
},
"cityName": "New Jersey",
"region": "South",
"people": [
{ "id": 1, "name": "x" },
{ "id": 2, "name": "y" },
{ "id": 3, "name": "z" },
{ "id": 4, "name": "a" },
{ "id": 5, "name": "b" },
{ "id": 6, "name": "c" }
]
}]
I'm trying to setup two dropdowns:
the first one displays a list of the cityNames
the second displays the list of all people names from the selected city.
I also want to save the id of the selected user name into a variable.
I've tried this so far:
<select ng-model="city">
<option ng-repeat="city in cityList" value="{{city.cityName}}">{{city.cityName}}</option>
</select>
<select ng-model="selectedItem">
<optgroup ng-repeat="option in cityList | filter: city">
<option ng-repeat="x in option.people">{{x}}</option>
</select>
You should use ng-options:
<select ng-model="selectedCity"
ng-options="c as c.cityName for c in cityList">
</select>
<select ng-model="selectedPerson"
ng-options="p as p.name for p in selectedCity.people">
</select>
Demo on JSFiddle.
This my json data how to set a selected option of a dropdown list control using angular JS
$scope.alltoys=[
{
"dId": "570b886545034f0001718247",
"dName": "Toys",
"dSubName": "Comics",
"users": [
{
"name": "Superman",
"id": "570b9e3a45034f000171827b"
},
{
"name": "Batman",
"id": "570ba00045034f000171828a"
}]
},
{
"dId": "5767c68c52faff0001fb8555",
"dName": "Toys",
"dSubName": "General",
"users": [
{
"name": "Jack",
"id": "570b9e3a45034f000171827b"
},
{
"name": "Sparrow",
"id": "570ba00045034f000171828a"
}]
}
]
How to populate this select box using angular js
I want to populate like this
Toys-Comics
Batman
Superman
Toys-General
Jack
Sparrow
In here Toys-Comics & Toys-General are only title of that selected content
I want to sort users array when populate.
<div class="controls">
<select class="form-control" ng-model="toy"
ng-options="eachtoy as eachtoy.dName+' - '+eachtoy.dSubName group by eachtoy for eachtoy in alltoys">
<option value="">---------------Select---------------</option>
</select>
</div>
I tried this but its not working.
Couple of changes. First, make sure $scope.alltoys is a collection (array), like this:
$scope.alltoys = [{
"dId": "570b886545034f0001718247",
"dName": "Toys",
"dSubName": "Comics",
"users": [{
"name": "Superman",
"id": "570b9e3a45034f000171827b"
}, {
"name": "Batman",
"id": "570ba00045034f000171828a"
}]
}, {
"dId": "5767c68c52faff0001fb8555",
"dName": "Toys",
"dSubName": "General",
"users": [{
"name": "Jack",
"id": "570b9e3a45034f000171827b"
}, {
"name": "Sparrow",
"id": "570ba00045034f000171828a"
}]
}];
Then change your html to handle groups with optgroup, like this:
<select class="form-control" ng-model="toy">
<option value="">---------------Select---------------</option>
<optgroup ng-repeat="eachtoy in alltoys | orderBy: 'dName + dSubName" label="{{eachtoy.dName+' - '+eachtoy.dSubName}}">
<option ng-repeat="user in eachtoy.users | orderBy: 'name'">{{user.name}}</option>
</optgroup>
</select>
Here's a working plunk
How can I repeat the value of names in the following json object inside ng-options.
$scope.networkIds =[
{
"name": "ghdth",
"value": []
},
{
"name": "dddd",
"value": []
},
{
"name": "Nrgyr",
"value": []
},
{
"name": "Ntehyt
"value": []
}
]
Currently I am using this code
<select id="networkID" ng-model="usageStatistics.networkID" ng-options="networkID as networkID for networkID in networkIds" ng-change="" class="form-control" ng-required="true">
Replace your code with this
$scope.networkIds =[
{
"name": "ghdth",
"value": []
},
{
"name": "dddd",
"value": []
},
{
"name": "Nrgyr",
"value": []
},
{
"name": "Ntehyt",
"value": []
}
];
<select id="networkID" ng-model="usageStatistics.networkID" ng-options="network as network.name for network in networkIds" class="form-control" ng-required="true">
<select id="networkID" ng-model="usageStatistics.networkID" class="form-control" ng-required="true">
<option ng-repeat"nId in networkIds" value="{{nId.value}}">{{nId.name}}</option>
</select>
I have following AngularJs object:
$scope.control = {'options': [{ "id": 1, "text": "Option 1", "isHidden": 0 }, { "id": 2, "text": "Option 2", "isHidden": 1 }, { "id": 3, "text": "Option 3", "isHidden": 0 }]};
Now, I CAN render a dropdown with all items using following:
<select ng-model="control.uiSelValue" ng-options="option.text for option in control.options" class="form-control"></select>
How can I render only those elements which are marked "isHidden = 0"? i.e. I want to render only "Option 1" and "Option 3" only in Dropdown.
Apply a custom filter to control.options. You really don't need to create this filter since you can use an expression but I think it is a bad practice to make too much logic in the view.
For example:
Demo
View
<select ng-model="control.uiSelValue"
ng-options="option.text for option in control.options | filter:myFilter"
class="form-control">
</select>
Controller
$scope.control = {
options: [{
"id": 1,
"text": "Option 1",
"isHidden": 0
}, {
"id": 2,
"text": "Option 2",
"isHidden": 1
}, {
"id": 3,
"text": "Option 3",
"isHidden": 0
}]
};
$scope.myFilter = function (value) {
return value.isHidden === 0;
};