From an API call I am receiving an object that looks like this and assigning it to $scope.countries:
$scope.countries = {
AU:"Australia",
BE:"Belgium",
US:"United States"
}
In my front end I want to add each country to a dropdown list, so that it will show the full country names like the below. I have taken many different approaches but cannot get it to work.
- Australia
- Belgium
- United States
Please see my code below:
<select ng-options="(key, value) in countries" ng-change="getRoles()">
Try this ,
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.countries = {
AU:"Australia",
BE:"Belgium",
US:"United States"
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<select ng-model="country" ng-options="key as value for (key , value) in countries"></select>
</body>
Use "ng-repeat = item in countries" and ng-options={{item}}
Related
I have a drop-down with some country code and its fullname in the option dropdown box.
(Like Below)
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["US-United state of America", "IN-India", "UK-United Kingdom"];
});
</script>
and my html Part is
<select ng-model="selectedName" ng-options="x for x in names"></select>
Ok, so what I want to do is, when I select any dropdown value in the dropdown, It should be entered only "US" without its fullname.
And when I saved this data into database, I am saving "US" only from webservice call, but In UI part I need to manage these things and when I edit this record only "US" should be selected in Dropdown not "US-United state of America".
I know this is weird requirement, but we need to do this :(
You can split the value in the dropdown to remove the part after hyphen - . Your names array will stay the same and you don't have to write any javascript.
var app = angular.module('myApp', [])
app.controller('myCtrl', [
'$scope',
function($scope) {
$scope.names = ["US-United state of America", "IN-India", "UK-United Kingdom"];
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<select ng-model="selectedName1" ng-options="x.split('-')[0] as x.split('-')[0] for x in names"></select> {{selectedName1}}
<select ng-model="selectedName2" ng-options="x as x.split('-')[0] for x in names"></select> {{selectedName2}}
</div>
</div>
Use a filter
Template:
<select
ng-model="selectedName"
ng-change="stripCountryName(x)"
ng-options="x | stripCountryName for x in names">
</select>
Filter:
app.filter('stripCountryName', function() {
return function(name) {
return name.split('-')[0];
};
});
You can also use this filter to modify the outcome after selecting an option by injecting it into your controller:
app.controller('myCtrl', function($scope, stripCountryNameFilter) {
$scope.stripCountryName = (option) => {
$scope.selectedName = stripCountryNameFilter(option);
}
})
This way, your original $scope.names will always stay intact.
I'm a very begginer in AngularJS(1.6) and I need to filter some results from a selected option.
I have to filter cities from states, and until there i'm doing fine. But then I need to filter and show the stores in this city on a list. Does anyone knows how to do It?
My code:
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</head>
<body data-ng-controller="testController">
<select id="state" ng-model="stateSrc" ng-options="state for (state, city) in states" ng-change="GetSelectedState()">
<option value=''>State</option>
</select>
<select id="city" ng-model="citySrc" ng-options="city for (city,store) in stateSrc" ng-change="GetSelectedCity()" ng-disabled="!stateSrc">
<option value=''>City</option>
</select>
<select id="city" ng-model="store" ng-options="store for store in citySrc" ng-disabled="!stateSrc || !citySrc">
<option value=''>Store</option>
</select>
<script>
angular
.module('myApp', [])
.run(function($rootScope) {
$rootScope.title = 'myTest Page';
})
.controller('testController', ['$scope', function($scope) {
$scope.states = {
'STATE_1': {
'City_1': ['Store_1', 'Store_2'],
'City_2': ['Store_3', 'Store_4']
},
'STATE-2': {
'City_3': ['Store_1', 'Store_2'],
'City_4': ['Store_3', 'Store_4']
}
};
$scope.GetSelectedState = function() {
$scope.strState = $scope.stateSrc;
};
$scope.GetSelectedCity = function() {
$scope.strCity = $scope.citySrc;
};
}
])
</script>
</body>
</html>
Thank's a lot!
It would be really helpful if you posted what your data source looks like. Assuming citySrc has objects containing arrays of stores, I would set a selectedCity in your controller when you call GetSelectedCity(), and then:
<ul>
<li ng-repeat="store in selectedCity.store">{{store}}</li>
</ul>
This will create list items for each store in your selectedCity object.
country names displaying using select box, select option coming from external json file. Based on selected country i am loading state json file into another select box,till every thing is ok, Now I need set Default selected country as INDIA, I tried bellow code.
html
<div ng-app="myApp" ng-controller="myCtrl">
<div>
<select id="country" ng-init="state1 = options['IN']" style="width:250px;" class="" name="selectFranchise" ng-model="state1" ng-change="displayState(state1)">
<option ng-repeat="(key,country) in countries" value="{{key}}">{{country[0]}}</option>
</select>
</div>{{countries}}{{state1}}
<div>
<select id="state" ng-model="cities">
<option ng-repeat="(state,city) in states[state1]" value="{{city}}">{{city}}</option>
</select>
</div>
</div>
script
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.states = {
"IN":[
"Delhi",
"Goa",
"Gujarat",
"Himachal Pradesh",
]
};
$scope.countries = {
IN: ["India"],
ZA: ["South Africa"],
AT: ["Austria"]
}
$scope.lastName = "Doe";
});
jsfiddle
Add this in the controller after defining your $scope.countries
$scope.state1 = Object.keys($scope.countries)[0];
Remove ng-init from Html page.
I have an object with property: value structure with should be used for the ng-options to create the select dropdown. I also have a ng-model variable which contains the property which should be currently selected. The problem is that I can't figure out how to fix the initial selection.
You can find the code here
<select ng-model="selectedCar" ng-options="id as value for (id, value) in cars track by id">
http://jsbin.com/wukanenozu/1/edit?html,js,output
Do not use "track by"
Do not use as and track by in the same expression. They are not
designed to work together.
<select ng-model="selectedCar" ng-options="id as value for (id, value) in cars ">
</select>
DEMO
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
frd : "Ford",
ft1 : "Fiat",
vlv : "Volvo"
}
$scope.selectedCar = 'ft1';
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select a car:</p>
<select ng-model="selectedCar" ng-options="id as value for (id, value) in cars ">
</select>
<h1>You selected model: {{selectedCar}}</h1>
</div>
<p>This example demonstrates the use of an object as the data source when creating a dropdown list.</p>
</body>
</html>
I would like to create a select element with ngOptions – so far so good:
<select ng-options="currency for (code, currency) in currencies track by code"
ng-model="something.currency"></select>
Now I want to track the options by the object key (so the value of the ng-model should be the key and not the value of the object). Is this possible in some simple way and how?
Is it what you're looking for ?
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.currencies_old = [
{code: "USD", curr: "$"},
{code: "IND", curr: "INR"}
];
$scope.currencies = {"USD": "USDollars", "EUR": "Euro"};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="GreetingController">
<select ng-model="item" ng-options="key as value for (key , value) in currencies"></select>
Code: {{item}}
<br/> <br/>
<select ng-options="item as item.curr for item in currencies_old track by item.code" ng-model="item_old"></select>
Code: {{item_old.code}}
</div>