I am trying to make dependent dropdown using JSON data
Used (for in) to get the key to integrate it in the dropdown but didn't work,whatever i searched every time json data is getting accessed by key to get the value in this structure i am able to get it in dropdown [{name:"india"},{name:"usa"}].But with current json structure i am not able to do it.
HTML:-
<div ng-controller="myCtrl3">
<select>
<option>Select Country</option>
<option ng-repeat="country in chooseCountries"></option>
<option ng-repeat="states in country"></option>
<option ng-repeat="city in states"></option>
</select>
</div>
JS:-
app.controller('myCtrl3',function($scope,$http){
$http({
url:'js/country.json',
method:'GET'
})
.then(function(response){
$scope.chooseCountries = response.data;
});
});
JSON(country.json):-
[{
"INDIA": {
"KARNATAKA": ["BANGALORE", "UDUPI", "MANGALORE"],
"TELENGANA": ["HYDERABAD", "GUNTUR", "SHANKERPALLY"]
},
"USA": {
"CALIFORNIA": ["SAN JOSE", "SAN HOSE", "NEW YORK"],
"FLORIDA": ["MIAMI", "DENVER"],
"INDIAPOLIS": ["INDIANA", "MASACHUTTEUS"]
},
"AUSTRALIA": {
"NEW SOUTH WALES": ["SYDNEY", "BRISBANE"],
"QUEENSLAND": ["PERTH", "VICTORIA"],
"WESTERN AUSTRALIA": ["MELBOURNE", "MCG"]
}
}]
i want the output first dropdown should show INDIA,USA,AUSTRALIA if i click INDIA second dropdown should show KARNATAKA AND TELENGANA in the third dropdown list if i click KARNATAKA it should show BANGALORE,UDUPI,MANGALORE.Didn't got any error but coudn't get the desired output.
I'm guessing you can't alter the format of the returned JSON. If that is the case, you don't have a nicely formed object hierarchy that you can use so instead you'll have to fall back to using (key, value). Below is a simple example of how you can accomplish what you are after.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.countryChoices = [{
"INDIA": {
"KARNATAKA": ["BANGALORE", "UDUPI", "MANGALORE"],
"TELENGANA": ["HYDERABAD", "GUNTUR", "SHANKERPALLY"]
},
"USA": {
"CALIFORNIA": ["SAN JOSE", "SAN HOSE", "NEW YORK"],
"FLORIDA": ["MIAMI", "DENVER"],
"INDIAPOLIS": ["INDIANA", "MASACHUTTEUS"]
},
"AUSTRALIA": {
"NEW SOUTH WALES": ["SYDNEY", "BRISBANE"],
"QUEENSLAND": ["PERTH", "VICTORIA"],
"WESTERN AUSTRALIA": ["MELBOURNE", "MCG"]
}
}];
$scope.selectedCountry = {};
$scope.selectedState = {};
$scope.selectedCity = '';
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
<select ng-model="selectedCountry" ng-options="value as key for (key, value) in countryChoices[0]"></select>
</div>
<div>
<select ng-model="selectedState" ng-options="value as key for (key,value) in selectedCountry"></select>
</div>
<div>
<select ng-model="selectedCity" ng-options="value as value for value in selectedState"></select>
</div>
</div>
In order for that to work, your json data should be like this:
[{
country: "INDIA",
states: [
{
"KARNATAKA": {
cities: ["BANGALORE", "UDUPI", "MANGALORE"]
}
}
}]
Hope it helps...
Related
This is my json value,
{
"location": [{
"state": "state1",
"cities": [{
"city1": "city1"
},
{
"city2": "city2"
}
]
},
{
"state": "state2",
"cities": [{
"city1": "city1"
},
{
"city2": "city2"
},
{
"city3": "city"
}
]
}
]
}
sample output in select box:
state1 - state name - parent
city1 - city name - child
city2
state2 - state name - parent
city1 - city name - child
city2
city3
<select>
<option *ngFor="let locations of location">
{{locations.state}}{{locations.cities.citiname}}
</option>
<select>
it is not multiselect. it is like grouping by state under cities.
Thanks in advance.
You can use optgroup attribute for select element.
<select>
<optgroup *ngFor="let location of locations" [label]="location.state">
<option *ngFor="let city of location.cities">{{Utils.keys(city)[0]}}</option>
</optgroup>
</select>
Typescript
Utils = {
keys : Object.keys
}
You cannot use directly Object.keys because Object is a part of window/global and angular cannot evaluate that expression.
I am having associate array like below :
$scope.item=
{
"Item1": [
{
"title": "Item1",
"choices": [
"Egg",
"burger",
]
}
],
"Item2": [
{
"title": "Item2",
"choices": [
"Pizza",
"Rice",
]
}
]
}
});
I am having 2 dropdown like below :
Dropdown 1 : Displaying Item1 and Item2 i.e title from both the list of items
Dropdown 2 : Displaying choices depending upon item selection. For example, if user selected Item1 then in 2nd dropdown I will display Egg,burger.
But I don't want to take 1 extra scope variable for binding this choices in my second dropdown.
I would like to get it from my item variable only based on Item selection but I am not understanding how to do this.
Right now I have commented out code for second dropdown because I am not getting how to pick choices from item in ng-options.
Is this not possible to bind second dropdown by picking item from 1 scope variable?
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.item = {
"Item1": [{
"title": "Item1",
"choices": ["Egg", "burger", ]
}],
"Item2": [{
"title": "Item2",
"choices": ["Pizza", "Rice", ]
}]
};
$scope.myItem = {
title: null,
choice: null
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select ng-model="myItem.title" ng-options="value[0].title as key for (key , value) in item">
<option value="">Select Items</option>
</select>
<!--<select ng-model="myItem.choice" ng-options="value[0] as key for (key , value) in item" >
<option value="">Select choice</option>
</select>-->{{myItem.title}} </ul>
You can bind the first ng-model as an input to the second ng-options to do this without introducing a new scope variable.
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.item = {
"Item1": [{
"title": "Item1",
"choices": ["Egg", "burger", ]
}],
"Item2": [{
"title": "Item2",
"choices": ["Pizza", "Rice", ]
}]
};
$scope.myItem = {
title: null,
choice: null
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select ng-model="myItem.title" ng-options="key as key for (key , value) in item">
<option value="">Select Items</option>
</select>
<select ng-model="myItem.choice" ng-options="value as value for value in item[myItem.title][0].choices">
<option value="">Select choice</option>
</select> {{myItem.title}}{{myItem.choice}} </ul>
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.item = {
"Item1": [{
"title": "Item1",
"choices": ["Egg", "burger", ]
}],
"Item2": [{
"title": "Item2",
"choices": ["Pizza", "Rice", ]
}]
};
$scope.myFunc = function() {
$scope.myItem.choices=$scope.item[$scope.myItem.title][0].choices;
};
$scope.myItem = {
title: null,
choices: null
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ul ng-app="myApp" ng-controller="MyController">
<select ng-model="myItem.title" ng-change="myFunc()" ng-options="value[0].title as key for (key , value) in item">
<option value="">Select Items</option>
</select>
<select ng-model="myItem.choice" ng-options="x for x in myItem.choices" >
<option value="">Select choice</option>
</select>{{myItem.choices}} </ul>
In my project, i need to select multiple options from a drop down. My code looks something like this:
//Controller
$scope.data = [{id: 1, Country: Zambia},
{id: 2, Country: United Kingdom}
{id: 3, Country: USA}]
$scope.selectedCountry = [];
//view
<select name="multipleSelect" id="multipleSelect" ng-model=" selectedCountry" multiple
ng-options="country.country as country.country for country in data"></select>
<h4> {{selectedCountry}}</h4>
The context above works and i can select multiple options from the dropdown. This link helped me to achieve this.
The problem.
Now the problem i'm having is that when i select the options from the dropdown i need to be able to pass the id and country in the selectedCountry array and not just the country. so for instance in the above context when you select the first country , the information passed through the to the selectedCountry Array will be something like this ["zambia"] but really what i'm looking for is something like this
[{id: 1, Country Zambia}].
To solve this problem i attempted to do this in the view:
<select name="multipleSelect" id="multipleSelect" ng-model=" selectedCountry" multiple
ng-options="{Id: country.Id, Country: country.country } as country.country for country in data"></select>
<h4> {{selectedCountry}}</h4>
That worked well and the data passed to the selectedCountry array is an object like {id: 1, Country: zambia} but the issue is that i cannot select multiple options from the dropdown i can only select 1 option.
What am i doing wrong? and what is the best way to achieve this?
Thank you
I've found some mistakes in your code:
Your JSON data is invalid. JSON string values must be in double
quote, the same for keys {"key":"value"}. Every item in an array
must be splitted by commas.
The correct key for the country name is "Country".
I'm using Angular 1.4.8.
You can use a shorter version of your code by using: country.Country for country in data
Something like this:
(function() {
var app = angular.module("app", []);
app.controller("controller", ["$scope",
function($scope) {
$scope.selectedCountry = [];
$scope.data = [{
"id": 1,
"Country": "Zambia"
}, {
"id": 2,
"Country": "United Kingdom"
}, {
"id": 3,
"Country": "USA"
}];
}
]);
})();
div {
margin: 2px;
}
.largeversion {
border: solid 1px #FF0000;
}
.shortversion {
border: solid 1px #005500;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div data-ng-app="app">
<div data-ng-controller="controller">
<div class="largeversion">
<pre>ng-options="{Id: country.Id, Country: country.Country } as country.Country for country in data"</pre>
<select name="multipleSelect" id="multipleSelect" ng-model=" selectedCountry" multiple ng-options="{Id: country.Id, Country: country.Country } as country.Country for country in data"></select>
</div>
<div class="shortversion">
<pre>ng-options="country.Country for country in data"</pre>
<select name="multipleSelect" id="multipleSelect" ng-model=" selectedCountry" multiple ng-options="country.Country for country in data"></select>
</div>
<h4> {{selectedCountry}}</h4>
</div>
</div>
I have two select input, first one contain countryName, i want to populate the StateName to the second select input depending on the CountryName that is chosen i.e the stateName for the selected country only.
I bind the countryName from the countryData and the State from State Data but I want the StateData to contain item based on the selected country
<select ng-model="selectedItem.CountryId" class="form-control"
ng-options="item._id as item.CountryName for item in countryData">
<option value="">Select</option>
</select>
<select ng-model="selectedItem.StateId" class="form-control"
ng-options="item._id as item.StateName for item in stateData">
<option value="">Select</option>
</select>
Here is how my stateData looks
[
{
"StateName": "State1",
"CountryName": "Country1",
},
{
"StateName": "State2",
"CountryName": "Country1",
},
{
"StateName": "State3",
"CountryName": "Country2",
},
{
"StateName": "State4",
"CountryName": "Country3",
},
{
"StateName": "State5",
"CountryName": "Country2",
},
{
"StateName": "State6",
"CountryName": "Country3",
}
]
You can disable the second drop down until the first is selected. You also need to change your JSON so that the states sit in an array. The second dropdown will only populate once you have selected a country and will then be enabled. -updated
<select ng-options="item.country for item in list" ng-model="selectedCountry"></select>
<select ng-disabled="selectedCountry === {}" ng-options="item.state for item in selectedCountry.states" ng-model="selectedState"></select>
https://jsfiddle.net/Kratos_SA/hjz27yb0/3/
Controller:
$scope.obj = {
"category": {
"value": "1",
"synonym": ""
},
"name": {
"value": "2",
"synonym": ""
}
};
I have html like this:
<select
ng-model="model",
ng-options="value.value as key for (key , value) in obj",
bs-select>
</select>
I want to get this result:
<option value="1"> category </option>
<option value="2"> name </option>
But i get this:
<option value="category"> category </option>
<option value="name"> name </option>
Can you help me to find a problem?
What you are doing is correct. The drop down list is a bit confusing since you should get the value by accessing from the model rather than from DOM. So whatever rendered in HTML doesn't matter.
Here is one example (FIDDLE), when you change the drop down, the actual value will be passed in. Though it looks a bit different in the rendered HTML, this is the nature of Angularjs being a self-contained scope for 2-way data binding.
function ctrl($scope) {
$scope.obj = {
"category": {
"value": "1",
"synonym": ""
},
"name": {
"value": "2",
"synonym": ""
}
};
$scope.model = "1";
$scope.$watch('model', function(newValue, oldValue){
console.log(newValue);
});
}