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

How to populate selectbox in angularJS?

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

Filter all in AngularJS

I am a beginner in AngularJS and I have an issue, here my code:
$scope.categories = [{
"id": 506,
"name": "test"
}, {
"id": 510,
"name": "aaa"
}, {
"id": 1,
"name": "bbb"
}, {
"id": 2,
"name": "ccc"
}, {
"id": 3,
"name": "eee"
}, {
"id": 4,
"name": "fff"
}];
$scope.contents = [{
"id": 0,
"categoryId": 506,
"title": "test1"
}, {
"id": 1,
"categoryId": 506,
"title": "test2"
}, {
"id": 2,
"categoryId": 506,
"title": "test3"
}, {
"id": 3,
"categoryId": 1,
"title": "test4"
}];
<div>
<label>
<input type="radio" name="category" ng-model="cc" ng-value="" checked/>all
</label>
<label ng-repeat="categoryItem in categories" ng-init="i= $parent">
<input type="radio" name="category" ng-model="i.cc" ng-value="{{categoryItem.id}}" />{{categoryItem.id}}
</label>
</div>
<ul>
<li ng-repeat="content in contents | filter:{categoryId: cc||undefined}">
<h3>id:{{content.categoryId}}</h3>
<p>{{content.title}}</p>
</li>
</ul>
I would like to be able to see all the items by selecting radio, in addition, I would like to first of them was always selected. Like right now it not work and I really don't know why.

Some issues/changes:-
Do not use interpolation with ng-value, i.e ng-value="{{categoryItem.id}}" should be ng-value="categoryItem.id". ng-value can just be an expression or a scope property that will be assigned to the ng-model.
Do not use ng-init or $parent on the view, they are not desired patterns to use. Instead use dot rule. define the filter object in the controller and set the property categoryId on the filterobject as the ng-model for the radio buttons.
<input type="radio" name="category"
ng-model="categoryFilter.categoryId" ng-value="categoryItem.id" />{{categoryItem.id}}
Just clear out the filter by setting categoryFilter to {} on click of all filter, and use ng-checked.
all
Just use the filter with the ng-repeat as follows:
<li ng-repeat="content in contents | filter:categoryFilter">
Demo
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.categoryFilter = {};
$scope.categories = [{
"id": 506,
"name": "test"
}, {
"id": 510,
"name": "aaa"
}, {
"id": 1,
"name": "bbb"
}, {
"id": 2,
"name": "ccc"
}, {
"id": 3,
"name": "eee"
}, {
"id": 4,
"name": "fff"
}];
$scope.clearFilter = function() {
$scope.categoryFilter = {};
}
$scope.contents = [{
"id": 0,
"categoryId": 506,
"title": "test1"
}, {
"id": 1,
"categoryId": 506,
"title": "test2"
}, {
"id": 2,
"categoryId": 506,
"title": "test3"
}, {
"id": 3,
"categoryId": 1,
"title": "test4"
}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.2.23/angular.js" data-semver="1.3.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
<label>
<input type="radio" name="category1" ng-click="categoryFilter={}" ng-checked="!categoryFilter.categoryId" />all
</label>
<label ng-repeat="categoryItem in categories">
<input type="radio" name="category" ng-model="categoryFilter.categoryId" ng-value="categoryItem.id" />{{categoryItem.id}}
</label>
</div>
<ul>
<li ng-repeat="content in contents | filter:categoryFilter">
<h3>id:{{content.categoryId}}</h3>
<p>{{content.title}}</p>
</li>
</ul>
</body>
</html>

Sometimes its good to start over with your code, if you cant seem to find it.
Isn't there some filter help on the angularjs website?
Tut 9, Filters

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'}
]);
});