I need to implement angular js typeahead directive for searching cities based on a particular country. Both should be autocomplete dropdowns.
That is when I type in the country text box it should show me suggestions of countries in the dropdown for the keyword i type.
When i type in city text box it should show me suggestions of cities related to only the selected country.
I have implemented the typeahead feature only for 1 textbox.
Now i need to search cities based on a selected country.
for example, if my json is as follows
$scope.data = [{
countries: [{
id: 1,
name: country1
},
{
id: 2,
name: country2
},
{
id: 3,
name: country3
}]
cities: [{
id: 1,
city_name: 'city1'
country_id: 1
}, {
id: 2,
city_name: 'city2'
country_id: 2
}, {
id: 3,
city_name: 'city3'
country_id: 2
}, {
id: 4,
city_name: 'city4'
country_id: 3
}],
}];
and if i have selected country2 in first text box then in the second text box it should display only city2 and city3 since they belong to country2
You can use a filter.
adding filter syntax to html
<input ng-model="selectedCtry"
typeahead="ctry as ctry.name for ctry in data.countries"/>
<input ng-model="selectedCity"
typeahead="city as city.name for city in data.cities | filter:{ country_id: selectedCountry.id }"/>
example - http://codepen.io/jusopi/pen/jWyXeL?editors=101
In country textbox make a call to server on blur and pass country, or country ID; and get list of city according to country
Related
I'm trying to display information from child and parent data within a json object. Below is my data:
$scope.electionDetails = {
id : 1,
election_type: "CityCouncil",
election_name: "City A City Council Elections
candidates : [{
id: 1,
election_id: 1,
position_id: 1,
first_name: "John",
last_name: "Doe"
},
{
id:2,
election_id:1,
position_id:1,
first_name: "Jane",
last_name: "Doe"
},
{
id:3,
election_id:1,
position_id:2,
first_name: "Mike",
last_name: "Doe"
},
{
id:4,
election_id:1,
position_id:2,
first_name: "Mary",
last_name: "Doe"
}],
positions : [{
id:1,
election_id: 1,
position: "Seat 1"
},
{
id:2,
election_id:1,
position: "Seat 2"
}]
}
I want to display this data grouped, using angular like so:
City A City Council Elections
Seat 1
John Doe
Jane Doe
Seat 2
Mike Doe
Mary Doe
Here you go. The HTML structure may not be exactly what you want, so you can change up what tags you use, but this is the basic idea using ng-if and ng-repeat to create lists of candidates for a given seat.
DEMO
i have 2 select boxes,which is getting the data using ng-options and hardcoded.
the second select box should show the data based on the selected data in first selectbox. this is the plunker.
https://plnkr.co/edit/r1S1e61H3RfH3uYGYTBP?p=preview
can anyone please help me.
$scope.data = [{
cities: [{
id: 1,
title: 'Mysore'
}, {
id: 2,
title: 'Bangalore'
}, {
id: 3,
title: 'Delhi'
}, {
id: 4,
title: 'Mumbai'
}],
maps: [{
id: 1,
title: 'Zoo',
city_id: 1
}, {
id: 2,
title: 'Palace',
city_id: 1
}, {
id: 3,
title: 'Beach',
city_id: 4
}]
}];
You can pass the selected city's id from 1st drop down as a filter to 2nd drop down like below
<select name="mapSelect" required="true" ng-options="map as map.title for map in data[0].maps | filter:{'city_id':citySelect.selectedOption.id}" ng-model="mapSelect.selectedOption"></select>
I am new to angularjs, i want to use dropdownlist with treeview structure. i used both dropdownlist and treeview control separately but find difficulty in using together. can anyone have idea about how to use both together(dropdownlist+treeview)
You can use simple select control. I hope you are grouping values by some property. Lets say you have following data structure:
$scope.data = [
{
id: 1,
value: "Cat",
type: "Animal"
},
{
id: 2,
value: "Dog",
type: "Animal"
},
{
id: 3,
value: "Lion",
type: "Animal"
},
{
id: 4,
value: "Parrot",
type: "Bird"
},
{
id: 5,
value: "Sparrow",
type: "Bird"
},
];
You can group your data by "type" field and show a treeview dropdown as follows:
<select ng-options="obj.value group by obj.type for obj in data track by $index"></select>
For more details you can look at https://docs.angularjs.org/api/ng/directive/ngOptions
js:
$scope.tasks = [{ Name: "Deliverable", Id: "Deliverable" },
{ Name: "Email", Id: "Email" }]
$scope.currentTask = {Subject: "Deliverable"}
html:
<select ng-model="currentTask.Subject" ng-options="task.Id as task.Name for task in tasks"></select>
result:
No option is selected when page load. But the dropdown works well. Am I missing anything?
I have a form that has a set of radio buttons (3 choices), and I am using angular and the ng-repeat directive to populate the html:
<div ng-repeat="fruit in fruitbasket">
<input type="radio" name="fruit" data-ng-model="fruit.isSelected">{{fruit.id}}
</div>
the inside of the controller for the fruit basket looks like this:
$scope.fruitbasket = [{isSelected: false, id: "Orange", value: "1"}, {isSelected: true, id: "Pear", value: "2"}, {isSelected: false, id: "Apple", value: "3"}]
The choices in the view are Orange, Pear, and Apple, but after one is selected I want to pass the numeric "value"
Not sure how to do this in angular, I have tried several things, but non successful. Each time the passed value shows as nil
How does a connected element of an object get passed from a radio button in Angularjs?
Here's how you do it:
isSelected is not needed. The fruitbasket is not part of your model, only the selected fruit is.
$scope.fruitbasket = [
{id: "Orange", value: "1"},
{id: "Pear", value: "2"},
{id: "Apple", value: "3"}
];
$scope.model={selectedFruit:2};
Assign the value (fruit.value) to each option and bind it to your model (model.selectedFruit)
<input value="{{fruit.value}}" data-ng-model="model.selectedFruit" type="radio" name="fruit" > {{fruit.id}}
Check out this working plnkr example.