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>
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>
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>
I have a list of name's and id's. I have displayed it with ng-repeat property. I want to show the corresponding id's along with the name in 1 second on its click.
$scope.showFn = function() {
$scope.showPopup = true;
$timeout(function(){
console.log("timeout");
$scope.showPopup = false;
}, 1000);
};
I have created a plunker https://plnkr.co/edit/kvkgwp60Bxq2MrHrr5Rr?p=preview
Now showing all the id's in a single click. Please help. Thanks.
Try with below in HTML:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="main">
<ul>
<li ng-repeat="item in items">
{{item.name}}
<span ng-show="showPopup && item.id == shownId">{{item.id}}</span>
</li>
</ul>
</body>
</html>
Controller will be like below:
var app = angular.module('app', [])
.controller('main', function($scope, $timeout) {
$scope.items = [{
"name": "one",
"id": "1"
}, {
"name": "two",
"id": "2"
}, {
"name": "three",
"id": "3"
}, {
"name": "four",
"id": "4"
}, {
"name": "five",
"id": "5"
}, {
"name": "six",
"id": "6"
}, {
"name": "seven",
"id": "7"
}]
$scope.showFn = function(Item) {
$scope.shownId = Item;
$scope.showPopup = true;
$timeout(function() {
console.log("timeout");
$scope.showPopup = false;
}, 1000);
};
});
Response code :
In this response eid is repeated, but I want to dispaly only once.
{"response": [
{
"sid": 1,
"eid": "AA",
"ename": "AA11"
},{
"sid": 2,
"eid": "AA",
"ename": "AA11"
}
],
"status": "success"
}
You could use the unique filter from AngularUI
<p ng-repeat="x in data.response | unique: 'ename'">{{x.ename}}</p>
DEMO
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in data.response | unique: 'ename'">{{x.ename}}</p>
<script>
//App declaration
var app = angular.module('myApp',['ui.filters']);
//Controller Declaration
app.controller('myCtrl',function($scope){
$scope.data = {"response": [
{
"sid": 1,
"eid": "AA",
"ename": "AA11"
},{
"sid": 2,
"eid": "AA",
"ename": "AA11"
}
],
"status": "success"
};
});
</script>
</body>
</html>
There is no magic way. This task should primarily be completed before the response lands the client (on server).
What you can do is make a function which handles the response the way you prefer.
e.g.
//Removes duplicates of eid property
function getUniqueValues(input) {
var output = [];
function existsInOutput(element) {
return output.map(function(val) {
return val.eid
}).includes(element.eid)
};
angular.forEach(input,function(val, key) {
if (!existsInOutput(val)) {
output.push(val);
}
})
return output;
}
I have an array
lists = [{"id":"1234"},{"id":"5423"},{"id":"65342"}]
And array with contents:
contents = [{"id":"1","listId":"1234"},{"id":"2","listId":"5423"}]
How can I filter ng-repeat for "contents" inside ng-repeat for "lists" and filter "contents" by content.listID equal list.id?
You should probably be doing this mapping in the controller rather than in the view, but the below example will show you how to do it.
(function() {
'use strict';
angular
.module('exampleApp', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.lists = [{
"id": "1234"
}, {
"id": "5423"
}, {
"id": "65342"
}]
vm.contents = [{
"id": "1",
"listId": "1234"
}, {
"id": "2",
"listId": "5423"
}]
}
ExampleController.$inject = [];
})();
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-controller="ExampleController as vm">
<div ng-repeat="item in vm.lists">
<p ng-repeat="content in vm.contents | filter:{ listId: item.id }">Content ID: {{content.id}} Lists ID: {{item.id}}</p>
</div>
</body>
</html>
ng-repeat="e in contents | filter: {listId: lists.id}"
You will have to parent id to child array and child array will be filtered for that parent id. plnk for similar example.
Regards.