Controller:
var response = {
"json": {
"response": {
"servicetype": "100",
"functiontype": "101",
"statuscode": "success",
"data": [
{
"countryid": 1,
"countryname": "India",
"countrycode": "91",
"currencyname": "Indian rupee",
"currencycode": "INR",
"latitude": "21.7679",
"longitude": "78.8718"
}
]
}
}
}
$scope.country = response.json.response.data;
Html:
<select name="Country" class="form-control1 drop countries" required ng-model="model.country" placeholder="Select" value="India" ng-change="getState(model.country);">
<option value="" disabled selected> Country*</option>
<option ng-repeat="item in country track by $index" value="{{item.countryid}}">{{item.countryname}}</option>
</select>
I wanted to pass both the countryname and countryid to fetch list of states , need solution . I could just pass only country id. Need assistance.
<select ng-model="country" required
ng-options="c as c.countryname for c in country track by c.countryid" ng-change="getState(country.countryid, country.countryname);" >
<option value="">Country*</option>
</select>
Use ng-options, you will get all values in country model
Use ng-options instead:
<select ng-model="model.country" required
ng-options="c.countryid as c.countryname for c in country" >
<option value="">Country*</option>
</select>
It will give you output:
<select ng-model="model.country" required=""
ng-options="c.countryid as c.countryname for c in country"
class="ng-pristine ng-invalid ng-invalid-required">
<option value="" class="">Country*</option>
<option value="0">India</option>
</select>
Demo Fillde
About your case: track by $index is what breaks your select
Demo Fillde 2
Related
HTML:
<select chosen multiple class="form-control" ng-model="model.Skills"
ng-options="skills.name.skillName for skills in skills"
data-placeholder="Select Skills" >
<option value=""></option>
</select>
$scope.skills = [
{
"skillName": "C",
"idx": "0"
},
{
"skillName": "C++",
"idx": "1"
},
{
"skillName": "Java",
"idx": "2"
}
]
idx is index of the skills . My angular chosen does multi selection. I wanted to set my default value as Java and C so I set it as following
$scope.model = {};
$scope.model.Skills = [2,1];
$scope.selected = 2;
but its not working out. https://plnkr.co/edit/cQEB5T?p=preview I used following example.
Change your code according to this code snippet...
<select
chosen multiple
ng-model="model.Skills"
ng-options="s.idx as s.skillName for s in skills ">
<option value=""></option>
</select>
I have json of all countries with me.
{"countries":[
{"name":"Afghanistan","code":"AF"},
{"name":"Åland Islands","code":"AX"},
{"name":"United States","code":"US"},
{"name":"Canada","code":"CA"},
{"name":"India","code":"IN"}
]};
I want to create drop down like
"
Choose Country(Default)
United States
Canada
------------
Åland Islands
Afghanistan
India
So on..."
I can be achieved via ng-repeat like
<select name="country" id="country" data-ng-model="country" required data-ng-change="allSelect()">
<option value="default" data-ng-data-ng-bind="'Choose Country'"></option>
<option value="{{cList.code}}" data-ng-if="cList.code === 'US'" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
<option value="{{cList.code}}" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
<option value="default1">--------------------------------------------------</option>
<option value="{{cList.code}}" data-ng-if="cList.code !== 'US' && cList.code !== 'CA'" data-ng-repeat="cList in countries" data-ng-bind="cList.name"></option>
</select>
How can i do same via ng-options?
Currently if i want to select any option by default is not happening its creating blank string.
Country list and default values i am getting from different ajax call.
You need to make some changes to your JSON
JSON
{
"Collections": [{
"Name": "North America",
"Countries": [{
"Name": "United States",
"code": "US"
}, {
"Name": "Canada",
"code": "CA"
}
]
}, {
"Name": "Asia",
"Countries": [{
"Name": "India",
"value": "IN"
}
]
}]
}
HTML
<body ng-controller="dobController">
<div class="col-md-20">
<div id="main">
<form class="form-horizontal" role="form">
<label class="control-label col-md-2">Filter List:</label>
<div class="col-md-5">
<select ng-model='theModel' ng-change="display(theModel)">
<optgroup ng-repeat='group in collection' label="{{group.Name}}">
<option ng-repeat='veh in group.Countries' value='{{group.Name}}::{{veh.Name}}'>{{veh.Name}}</option>
</optgroup>
</select>
</div>
</form>
</div>
</div>
Controller
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope", "$http",
function($scope, $http) {
$http.get('test.json').then(function(response) {
$scope.collection = response.data.Collections;
console.log(response);
});
$scope.display = function(name) {
alert(name.split("::")[0] + "." + name.split("::")[1]);
}
}
]);
DEMO
I need to pass the selected country name into key name country, but the $scope.options would not be recognized. I cannot select the country let alone pass the right country to the key value. So does anyone knows what I am doing wrong, and what the solution might be in this case.
Anyone an idea how I can fix this?
$scope.addComment = function() {
$scope.comments.push($scope.dataObject);
$scope.options = [{
id: 1,
country: "China"
},
{
id: 2,
country: "France"
},
{
id: 3,
country: "Germany"
},
{
id: 4,
country: "Japan"
},
{
id: 5,
country: "Hongary"
},
{
id: 6,
country: "Hong Kong"
},
{
id: 7,
countrybv : "Italy"
}]
$scope.dataObject = {
name: "",
country: $scope.options[0],
comment: ""
};
};
<body>
<td><select class="comment-form comment" ng-model="selected" ng-options="option as option.country for option in options track by option.id">
<option value="">Select a country</option>
</select></td>
</body>
Try this:
<select ng-model="selected"
ng-options="x as x.country for x in options track by x.Id"
class="form-control"
ng-required="true">
<option value="">-- Choose Country --</option>
</select>
For more option see
in html:
<select ng-model="selectedCountry" ng-options="country as country.country for country in countries track by country.id">
<option value="" disabled="" selected>Select Country</option>
</select>
<p>country: {{selectedCountry.country}}</p>
<p>id: {{selectedCountry.id}}</p>
I've made this in plnkr:
https://plnkr.co/edit/406tgmG5L4s5SFEeUlF3?p=info
Good luck!
i have successfully set up a dependant dropdown using angularjs, but i have a little problem:
i need to define the value of every option tag because it is set up automatically by angular processor.
here is my html code:
<div ng-controller="CountryCntrl">
<select id="country" ng-model="states" ng-options="country for (country, states) in countries">
<option value=''>Choose</option>
</select>
Departement:
<select id="state" ng-disabled="!states">
<option value="">Choose</option>
<option ng-repeat="state in states" value="{{state.id}}">{{state.dep}}</option>
</select>
</div>
<br/>
<input type="submit" value="go">
and here is my angularjs code:
<script>
var Aplic = angular.module("Aplic", []);
Aplic.controller('CountryCntrl', function($scope){
$scope.countries = {
'Aquitaine': [ {'id':'22', 'dep': "Dordogne"}, { 'id':'31', 'dep' : "Gironde"} ],
'Auvergne': [ {'id' : '3', 'dep' : "Allier"}, {'id' : '15', 'dep' : "Cantal"} ]
};
});
</script>
I repeat, i have successfully set up the value for the option in the second dropdown, but for the first one it takes automatically the name of variable country.
so how should i change my code to give every option tag in the first dropdown a specific value.
to understand well my idea, please inspect the values in every dropdown. here is my working snippet on plunker:
http://embed.plnkr.co/VBdxGDQNOJSHeGVfloo2/preview
any help will be appreciated.
here is what i want to do:
<select id="state" ng-model="cou">
<option value="">Choisir</option>
<option ng-repeat="cou in countries" value="{{cou.id}}">{{cou.name}}</option>
</select>
<select id="state" ng-disabled="!cou">
<option value="">Choisir</option>
<option ng-repeat="state in cou.states" value="{{state.id}}">{{state.dep}}</option>
</select>
but now the second dropdown does not work, if you can fiw that the problemwill be solved
Here is sample implementation for you. This will keep values in option tag.
<div ng-app="Aplic" ng-controller="CountryCntrl">
<select id="country" ng-model="selectedCountry" ng-options="country.id as country.name for country in countries track by country.id">
<option value="">Choose</option>
</select>Departement:
<select id="state"
ng-model="selectedState"
ng-disabled="!selectedCountry"
ng-options="state.id as state.dep for state in ((countries | filter:{'id':selectedCountry})[0].states) track by state.id">
<option value="">Choose</option>
</select>
<div>selectedCountry id: {{selectedCountry}}</div>
<div>selectedState id: {{selectedState}}</div>
</div>
Controller:
$scope.countries =[
{
'id': '1',
'name': "Aquitaine",
'states': [{
'id': '22',
'dep': "Dordogne"
}, {
'id': '31',
'dep': "Gironde"
}]
},
{
'id': '2',
'name': "Auvergne",
'states': [{
'id': '3',
'dep': "Allier"
}, {
'id': '15',
'dep': "Cantal"
}]
}];
Working demo
Can any body help me with sample code?
I want to select country with AngularJS ui select2 and upon select, the corresponding state is loaded on a different select2 for state. And the country and state are located in a JSON data. The state has a Country Id.
Something like the documentation says? Assuming that you have an object data in your scope.
Data structure
{
"countries": [
{
"id": 1,
"name": "US",
"states": [
{"id": 1, "name"="CA"}
{"id": 2, "name"="NJ"}
]
},
{
"id": 2,
"name": "UK",
"states": [
{"id": 1, "name"="London"}
{"id": 2, "name"="Manchester"}
]
}
]
}
HTML View
<select ui-select2 ng-model="countryPicked" data-placeholder="Pick a country">
<option value=""></option>
<option ng-repeat="country in data.countries" value="{{country.id}}">{{country.name}} </option>
</select>
<select ui-select2 ng-model="statePicked" data-placeholder="Pick a state" ng-if="country">
<option value=""></option>
<option ng-repeat="state in data.countries[countryPicked]" value="{{state.id}}">{{state.name}}</option>
</select>
<p>Country picked: {{ countryPicked }}</p>
<p>State picked: {{ statePicked }}</p>