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>
Related
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are come in tabs only
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.homePlayers = [{
"id": "586150f2d99139510b4254bb",
"name": "Sachin Tendulkar",
"country": "India"
}, {
"id": "586150f2d99139510b4254b1",
"name": "Saurav Ganguly",
"country": "India"
}];
$scope.awayPlayers =
[{
"id": "586150f2d99139510b4254b2",
"name": "Shane Watson",
"country": "Aus"
}, {
"id": "586150f2d99139510b4254b3",
"name": "Steve Waugh",
"country": "Aus"
}];
});
this is my html content how to populate
<body ng-app="plunker" ng-controller="MainCtrl">
India bat vs Aus bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('hometeam')">UPDATE SCORE</a>
</div>
Aus bat vs India bowl<br>
<div class="row">
<select ng-model="battingDetail.batterId">
<option ng-repeat="item in awayPlayers" value="{{item.id}}">{{item.name}}</option>
</select> <select ng-model="bowlingDetail.bowlerId">
<option ng-repeat="item in homePlayers" value="{{item.id}}">{{item.name}}</option>
</select>
<a ng-click="submitScores('awayteam')">UPDATE SCORE</a>
</div>
</body>
I have two select box div for gettting scoredetails home teams and awayteams first and second innings
These two div are not come in same page in my webpage tabs only.But when i am using this way ny browser will hang.
So i need same ng-model in both innings for code reusing.but when i am using my browser will hang
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
<li class="list-group-item" ng-repeat="entity in displayedProjectRoles">
<div>
<strong>Role: </strong>
<select
ng-model="project.role"
ng-options="option as option.name for option in project_role"
ng-required="true"
id="project_role"
class="form-control">
</select>
</div>
</li>
How can I set the value of model project.role based on the value on entity.role in the ng-repeat? I tried ng-selected or even using entity.role in the ng-model but it's not working properly.
this is the data in displayed Project Roles
[
{
"empid": 2,
"role": "employee"
},
{
"empid": 1,
"role": "pm"
}
]
and in the project_role
[
{
"id": 1,
"name": "employee"
},
{
"id": 2,
"name": "pm"
}
]
So basically the value of role in displayedProjectRoles matches with the name in project_role
This is a good example of angular select.
Essentially the ng-model for the select has to match the ng-option value to bind. In your example project.role would have to be exactly equal to option from your ng-options. Note this is type specific so had it been
option.id as option.name for option in project_role
and option.id == 1 then project.role == '1' will not bind
Let's say if I've data coming in JSON like this.
[
{
"id": 10,
"session": "test2",
"event": "Event 2"
},
{
"id": 11,
"session": "TEST 22",
"event": "Event 2"
},
{
"id": 9,
"session": "test 1",
"event": "Event 1"
}
]
I want to group the records by event, (Event 2 is repeated) and display a select box while keeping track of the id (on $scope so I can update the form).
Expectation.
<select>
<optgroup label="Event 1">
<option value="10">test2</option>
</optgroup>
<optgroup label="Event 2">
<option value="11">Test 22</option>
<option value="9">test 1</option>
</optgroup>
</select>
ng-options="opt.id as opt.session group by opt.event for opt in options"
I have a complex object like this
listItems = [
{ "id": 1, "name": "myname1" },
{ "id": 2, "name": "myname2" },
{ "id": 3, "name": "myname3" }
];
I want to create options from above listItems like this
<select>
<option value="1">myname1</option>
<option value="2">myname2</option>
<option value="3">myname3</option>
</select>
I have used this angularjs code, its generating the correct html code but whatever I select in dropdown is not shown inside the select box
<select ng-model="iList" ng-options="item.id as item.name for item in listItems track by item.id" />
Assuming listItems is in the $scope
<select ng-options="item.id as item.name for item in listItems"></select>