Develop Reference

Angular conditional multi selection box

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>

Javascript - Why this piece of Angular JS code for dependable drop-down is not working?

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

Populate and filter a dropdown with an array of objects using AngularJS

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.

Two Objects In Select Dropdown Using ng-model

I'm currently taking an object and placing it into a select dropdown of 'Employees':
$scope.Employees = [{
"id": 1,
"name": "George",
"job": "Janitor"..
.. which populates some data depending on the selection. Works great! Here is my current fiddle:
http://jsfiddle.net/3Hgy7/2/
<select ng-model="selectedOption" ng-options="option.name for option in Employees"></select>
<br>
<br>
<p>ID: {{selectedOption.id}}</p>
<p>JOB: {{selectedOption.job}}</p><br><pre>{{selectedOption}}</pre>
From the controller you can also see a 'Vehicles' object:
$scope.Vehicles = [{
"id": 1,
"employee_id": 1,
"make": "Honda",
"model": "Civic"...
I'd like to be able to include this into my dropdown selection somehow. So when someone selects a certain employee, their vehicles would be listed. I'm really not sure how to go about doing this. I know you can take both objects into the ng-model and add some ng-options.
http://jsfiddle.net/3Hgy7/3/
<select ng-model="selectedOption.Vehicles" ng-options="option.make for option in Vehicles"></select>
..Though I'm pretty sure this isn't correct whatsoever. Any help would be greatly appreciated. Please let me know if I need to provide more info!
Thanks!
T

You can do it like so:
<div ng-controller="MyCtrl">
<select ng-model="selectedOption" ng-options="option.name for option in Employees"></select>
<br>
<br>
<p>ID: {{selectedOption.id}}</p>
<p>JOB: {{selectedOption.job}}</p>
<br><pre>{{selectedOption}}</pre>
<div>
<select class="form-control" ng-model="selectedVehicle" ng-options="v.make for v in Vehicles | filter:{employee_id: selectedOption.id}"></select>
</div>
Then your JavaScript as follows:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.Employees = [{
"id": 1,
"name": "George",
"job": "Janitor"
}, {
"id": 2,
"name": "Frank",
"job": "Scientist"
}, {
"id": 3,
"name": "Julie",
"job": "Florist"
}, {
"id": 4,
"name": "James",
"job": "Teacher"
}];
$scope.selectedOption = $scope.Employees[0];
$scope.Vehicles = [{
"id": 1,
"employee_id": 1,
"make": "Honda",
"model": "Civic"
}, {
"id": 2,
"employee_id": 2,
"make": "BMW",
"model": "M3"
}, {
"id": 3,
"employee_id": 4,
"make": "Nissan",
"model": "Pathfinder"
}, {
"id": 4,
"employee_id": 2,
"make": "Jaguar",
"model": "XF"
}];
}
Edit - Working Fiddle

Angularjs trigger country state dependency

Can someone please help me make my example of Country/State drop down dependency work?
I intentionally created JSON in this way because I want the dependency to be generic, so I would be able to apply it on any drop down while using only Meta Data and not HTML.
Here's a link to see an example of the code in JSFidlle
HTML
Country:<select data-ng-model="Countries" data-ng-options="country.id as country.name for country in Countries.items">
<option value="">Please select a country</option>
</select>
State: <select data-ng-model="currentItem" data-ng-options="item.id as item.name for item in currentStates.items">
<option value="">Please select a state</option>
</select>
JavaScript Code:
function Controller($scope) {
var Countries = {
"id": "field10",
"items": [{
"id": "10",
"StateGroupID":"0",
"name": "United State"
},
{
"id": "2",
"StateGroupID":"1",
"name": "Canada"
}]
};
var States =
{ "id": "field20",
"StateGroups": [{
"items": [{ "id": "1",
"name": "Alabama"
},
{
"id": "2",
"name": "Alaska"
},
{ "id": "3",
"name": "Arizona"
},
{ "id": "4",
"name": "California"
}]},
[{ "id": "201",
"name": "Alberta"
},
{
"id": "202",
"name": "British Columbia"
},
{
"id": "303",
"name": "Manitoba"
},
{
"id": "304",
"name": "Ontario"
}]]
};
$scope.Countries = Countries;
$scope.currentStates = States.StateGroups[0];
$scope.$watch('currentStates', function(value, oldValue){
//alert(value);
//alert(JSON.stringify(value));
//$scope.currentStates = (value == "10") ? States.StateGroups[0] : States.StateGroups[1];
});
}

first, I think there is a little mistake in your JSON, you should have one "items" before the Canadian states
{"items": [{ "id": "201",
"name": "Alberta"
}, .....
After doing this, I would modify your HTML in order to have 2 different model names (the way you did, at the first click you overwrite the list of countries). Then I'll use a different syntax for the ng-repeat, in order to force the value to the StateGroupId
<select data-ng-model="selectedCountry">
<option ng-repeat='country in Countries.items' value='{{country.StateGroupID}}'>{{country.name}}</option>
</select>
Doing this allows you to create a function to get the states of the selected group ID :
$scope.getStates=function(){
console.log($scope.selectedCountry)
return $scope.backupStates.StateGroups[$scope.selectedCountry].items;
}
Then you can use this function to display them using ng-repeat
<select data-ng-model="selectedState" >
<option value="">Please select a state</option>
<option ng-repeat='state in getStates()'>{{state.name}}</option>
</select>
I modified your fiddle here : http://jsfiddle.net/DotDotDot/TsxTU/14/ , I hope this is the kind of behavior you wanted :)

I suggest you a bit of refactoring to your data model - it seems tangled. Let's store counties and states in two arrays:
$scope.countries = [{
"name": "USA",
"id": 1
},{
"name": "Canada",
"id": 2
}];
$scope.states = [{
"name": "Alabama",
"id": 1,
"countryId": 1
}, {
"name": "Alaska",
"id": 2,
"countryId": 1
}, {
"name": "Arizona",
"id": 3,
"countryId": 1
}, {
"name": "Alberta",
"id": 4,
"countryId": 2
}, {
"name": "British columbia",
"id": 5,
"countryId": 2
}];
Having this, we can write selects for data:
<select data-ng-model="country" data-ng-options="country.name for country in countries" data-ng-change="updateCountry()">
<option value="">Select country</option>
</select>
<select data-ng-model="state" data-ng-options="state.name for state in availableStates">
<option value="">Select state</option>
</select>
It's a pity we cannot use if expressions in selectors - if we can, we do not need a single line of JS! But we need:
$scope.updateCountry = function(){
$scope.availableStates = [];
angular.forEach($scope.states, function(value){
if(value.countryId == $scope.country.id){
$scope.availableStates.push(value);
}
});
}
And that's all. Here is a working plunk for you.

The easiest way to fix is to refer the currentCountry in the 2nd select and no need to use the $watch to achieve your requirement.
<select data-ng-model="currentCountry" data-ng-options="country.name for country in Countries.items">
<select data-ng-model="currentItem" data-ng-options="item.id as item.name for item in States.StateGroups[currentCountry.StateGroupID].items">
Demo

angular-country-picker
bower install angular-country-picker (or)
npm install angular-country-picker
<script src="bower_components/angular-country-picker/country-picker.js"></script>
<script src="node_modules/angular-country-picker/country-picker.js"></script>
angular.module('webApp', ['puigcerber.countryPicker']);
<select ng-model="selectedCountry" pvp-country-picker="name"></select>
angular.module('myApp', ['puigcerber.countryPicker'])
.config(function(pvpCountriesProvider) {
pvpCountriesProvider.setCountries([
{ name: 'Abkhazia', alpha2: 'AB'},
{ name: 'Kosovo', alpha2: 'XK'},
{ name: 'Nagorno-Karabakh', alpha2: 'NK'},
{ name: 'Northern Cyprus', alpha2: 'KK'},
{ name: 'Somaliland', alpha2: 'JS'},
{ name: 'South Ossetia', alpha2: 'XI'},
{ name: 'Transnistria', alpha2: 'PF'}
]);
});