I am trying to displaying country names from json object. json data looking collection of array object, this object using ng-repeat iterating that json data and displaying into select box. i tried bellow code.
Json
----
$scope.countries = [
{
"AT": "Austria"
},
{
"CI": "Côte d'Ivoire"
},
{
"CG": "Congo"
},
{
"SV": "El Salvador"
},
{
"IN": "India"
},
{
"SX": "Sint Maarten (Dutch part)"
},
{
"SZ": "Swaziland"
},
{
"CH": "Switzerland"
},
{
"AE": "United Arab Emirates"
}
]
html
----
<select ng-model="counryNames" >
<option ng-repeat="(key,country) in countries" value="{{key}}">{{country[key]}}</option>
</select>
Change your ng-repeat as, you should access the key of countries not country
<option ng-repeat="(key, value) in countries" value="{{key}}">{{countries[key]}}</option>
DEMO
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.countries = [{
"AT": "Austria"
}, {
"CI": "Côte d'Ivoire"
}, {
"CG": "Congo"
}, {
"SV": "El Salvador"
}, {
"IN": "India"
}, {
"SX": "Sint Maarten (Dutch part)"
}, {
"SZ": "Swaziland"
}, {
"CH": "Switzerland"
}, {
"AE": "United Arab Emirates"
}];
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<select>
<option ng-repeat="(key, value) in countries" value="{{key}}">{{countries[key]}}</option>
</select>
</div>
</body>
Related
I want to set my angular chosen with default value from my response. also my Angular chosen dropdown values also coming from AJAX response. I tried ng-init and pointing the value with respect to index. But no luck.
HTML
<select ng-init="model.country = cities[currentLocationIdx]"
chosen ng-model="model.country"
ng-options=" cities.name for cities in cities" required>
<option value="">Select a Location</option>
</select>
JS:
$scope.model.country = "Bangalore";
$scope.currentLocationIdx = $scope.cities.findIndex( city => city.name === $scope.model.country );
JSON:
[
{
"name": "South Andaman"
},
{
"name": "Nicobar"
},
{
"name": "Adilabad"
},
{
"name": "Anantapur"
},
{
"name": "Chittoor"
},
{
"name": "East Godavari"
},
{
"name": "Bangalore"
}
]
You just need to declare your variable as obj in controller like this:
$scope.model = {};
WORKING DEMO
Try this below updated code. Its working at my end with chosen library.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="app" ng-controller="ctrl">
<select name="mySelect" id="mySelect" chosen
ng-options="city.name for city in cities track by city.name"
ng-model="country"></select>
{{country}}
<script src="../lib/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chosen-localytics/1.8.0/angular-chosen.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope) {
$scope.cities = [
{
"name": "South Andaman"
},
{
"name": "Nicobar"
},
{
"name": "Adilabad"
},
{
"name": "Anantapur"
},
{
"name": "Chittoor"
},
{
"name": "East Godavari"
},
{
"name": "Bangalore"
}
];
$scope.country = { "name": "Bangalore" };
});
</script>
</body>
</html>
currently I have this JSON object:
{
"hospitalId" : "0002",
"name" : "test form",
"procedureId" : "0002-testform",
"steps" : [
{
"title" : "Brand",
"value" : [
"jonson",
"smith",
"braun"
]
},
{
"title" : "Procedure type",
"value" : [
"total",
"unicompartimental"
]
}
]
}
And I need to display it on a multiselect, like this:
<strong>Brand</strong>
<ul>braun</ul>
<ul>jonson</ul>
<ul>smith</ul>
<strong>Procedure type</strong>
<ul>total</ul>
<ul>unicompartimental</ul>
They need to be ordered by steps.title and by steps.value, the thing is: I can't figure out how to display them correctly with a <select ng-options> tag, this is what I've tried:
<select multiple ng-model="step" ng-options="step[0].value group by step.title for step in loadedSteps.steps " ></select>
Gives me: Brand undefined
<select multiple ng-model="step" ng-options="step.value group by step.title for step in loadedSteps.steps | orderBy:['value']"></select>
Gives me: Brand [jonson, smith, braun]
Also I've tried with a nested <option> but it doesn't have ordering...
Any help would be very appreciated, thanks in advance
Here is the answer you are looking for.
You should use two ng-repeat, first for displaying title and other for displaying values inside the title.
The first ng-repeat starts with the title and ends with the values in that title.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names =
{
"hospitalId": "0002",
"name": "test form",
"procedureId": "0002-testform",
"steps": [{
"title": "Brand",
"value": [
"jonson",
"smith",
"braun"
]
}, {
"title": "Procedure type",
"value": [
"total",
"unicompartimental"
]
}]
}
});
<!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">
<div >
<label>{{step.title}}</label>
<select>
<option ng-repeat-start="step in names.steps | orderBy:'title'" ng-bind="step.title"></option>
<option ng-repeat-end ng-repeat="opt in step.value | orderBy:'step.value':true" ng-bind="' - ' + opt"></option>
</select>
</div>
</div>
</body>
</html>
Please run this snippet
HEre is a plunker
If I have a dataset that contains an array of objects, with each object having an array inside of them, how can I sort the subarrays by their properties? For example, here is some sample music data, it has 2 albums with tracks within them:
albums: [
{
type: "album",
name: "Brothers",
tracks: [
{
type: "track",
name: "Everlasting Light"
},
{
type: "track",
name: "Next Girl"
},
{
type: "track",
name: "Tighten Up"
}
]
},
{
type: "album",
name: "Listen",
tracks: [
{
type: "track",
name: "Around Town"
},
{
type: "track",
name: "Forgive & Forget"
}
]
}
]
The result would look like this:
- Around Town
- Everlasting Light
- Forgive & Forget
- Next Girl
- Tighten Up
Is there any way I can use an ng-repeat to create an alphabetically sorted list of music tracks?
I'd imagine it working something like below, but I tried with no success.
<p ng-repeat="track in albums.tracks">{{track.name}}</p>
Since you need only the tracks of albums, you should merge all the tracks in a single array and then just sort it alphabetically. Here's is a snippet working:
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.albums = [
{
"type":"album",
"name":"Brothers",
"tracks":[
{
"type":"track",
"name":"Everlasting Light"
},
{
"type":"track",
"name":"Next Girl"
},
{
"type":"track",
"name":"Tighten Up"
}
]
},
{
"type":"album",
"name":"Listen",
"tracks":[
{
"type":"track",
"name":"Around Town"
},
{
"type":"track",
"name":"Forgive & Forget"
}
]
}
];
$scope.tracks = [];
angular.forEach($scope.albums, function(value) {
$scope.tracks = $scope.tracks.concat(value.tracks);
});
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js">
</script>
</head>
<body ng-controller="mainCtrl">
<div ng-repeat="track in tracks | orderBy:'name'">
<span ng-bind="track.name"></span>
</div>
</body>
</html>
You can use the orderby filter to sort your list based on a property. The angular website has more info on this https://docs.angularjs.org/api/ng/filter/orderBy
Here is a plunker that might help, https://plnkr.co/edit/goxNA9PvBeFL0hyWp9hR?p=preview
You can use the filter directly in your html to sort by a property.
<div ng-repeat="album in albums">
<h2>{{album.name}}</h2>
<div ng-repeat="track in album.tracks | orderBy:'name'">
{{track.name}}
</div>
</div>
I am trying to filter my data which I am getting from a HTTP GET endpoint by an array of values
filters = ['Full Time', 'LinkedIn', ...]
The general structure of the response I am getting back is an array of objects where each object can look like this:
{
"preferences": {
"jobType": {
"type": "Full Time"
}
},
"profile": {
"additionalinfo": {
"organization": [
{
"name": "Google"
},
{
"name": "LinkedIn"
}
],
"university": [
{
"name": "UC Berkeley",
"degrees": [ {"name": "Computer Engineering"}]
}
}
}
}
So if I filter by ["Google", "Full Time"], the above object should be included.
Is there a built in filter to handle this?
I am having trouble writing the custom filter to handle such a heavily nested object.
Any ideas on how to implement this?
You can use built in filter like this jsfiddle
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope) {
$scope.data = [{
"preferences": {
"jobType": {
"type": "Full Time"
}
},
"profile": {
"additionalinfo": {
"organization": [{
"name": "Google"
}, {
"name": "LinkedIn"
}],
"university": [{
"name": "UC Berkeley",
"degrees": [{
"name": "Computer Engineering"
}]
}]
}
}
}, {
"preferences": {
"jobType": {
"type": "Remote"
}
},
"profile": {
"additionalinfo": {
"organization": [{
"name": "Yandex"
}, {
"name": "LinkedIn"
}],
"university": [{
"name": "UC Berkeley",
"degrees": [{
"name": "Computer Engineering"
}]
}]
}
}
}];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h3>Jobs</h3>
<input ng-model="filterModelJobType" placeholder="filter jobType">
<input ng-model="filterModelJob" placeholder="filter job">
<table class="table table-striped table-bordered">
<tbody>
<tr ng-repeat="x in data|filter:{profile: {additionalinfo:{organization:{name:filterModelJob}}},preferences: {jobType:{type:filterModelJobType}}}">
<td>{{ $index + 1 | number }}</td>
<td class="text-center">{{ x.preferences.jobType.type }}</td>
<td class="text-left">
<div ng-repeat="org in x.profile.additionalinfo.organization">
<hr> {{org.name}}
</div>
</td>
</tr>
</tbody>
</table>
</body>
In the latest version of AngularJS
If there is nested object then
var foo = $filter('filter')($scope.welcome, {
additionalinfo: { name: 'google' }
});
Reference: GitHub issue
I'm trying to populate a Select getting data from a webapi using ng-options.
Basically, my webapi returns the following JSON:
{
"items":[
{
"name":"X",
"id":1
},
{
"name":"Y",
"id":2
}
]
}
And I Need to generate options in a select displaying the name property, but with the id as value.
The problem is that I can't display my options using ng-options. Here's what I'm trying:
<html ng-app='app'>
<head>
<title>angular</title>
</head>
<body ng-controller='DemoCtrl'>
<select ng-model="selectedTestAccount" ng-options="option.name for option in testAccounts">
<option value="">Select Account</option>
</select>
<script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
<script>
angular.module('app', []).controller('DemoCtrl', function ($scope, $http) {
$scope.selectedTestAccount = null;
$scope.testAccounts = [];
$http({
method: 'GET',
url: '/api/values',
data: {}
}).success(function (result) {
console.log(result);
$scope.testAccounts = JSON.parse(result.items);
});
});
</script>
</body>
</html>
I hope this helps you
angular.module("app", []);
angular.module("app").controller("ctrl", function($scope) {
$scope.testAccounts = [];
var youJson = [
{ "items": [{ "name": "X", "id": "your value for X" }, { "name": "Y", "id": "your value for Y" }] },
{ "items": [{ "name": "A", "id": "your value for A" }, { "name": "B", "id": "your value for B" }] }
];
angular.forEach(youJson, function(items) {
angular.forEach(items.items, function(item) {
$scope.testAccounts.push(item);
});
});
console.log($scope.testAccounts);
});
<!doctype html>
<html ng-app="app" ng-controller="ctrl">
<head>
</head>
<body>
<select ng-model="mySelect" ng-options="item.id as item.name for item in testAccounts"></select>
{{mySelect}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</body>
</html>