Having trouble populating data in the drop-down component. Everything works fine when using dummy JSON data as shown in the comments.
The GET request service retrieves the necessary data, and then I assign the response to the appropriate variable. The GET service and drop-down component are located in another View component.
No error message in the console... what am I missing here?
Code for the GET requests service:
(function () {
"use strict";
angular.module('app').factory('GetService', function ($http) {
return{
get: function (uri, config) {
$http.get(uri, config).
then(function(response) {
return response.data;
});
}
}
});
}());
Code for the drop-down component that accepts JSON data:
(function () {
"use strict";
var module = angular.module("app");
module.component("dropDown", {
template:
<div class="input-group">
<span class="input-group-addon">{{vm.placeholder}}</span>
<select class="form-control"
ng-model="vm.selectedItem"
ng-options="option.name for option in vm.items"></select>
</div>,
controllerAs: "vm",
bindings: {
placeholder: '@',
itemlist: '='
},
controller: function() {
var vm = this;
vm.items = vm.itemlist;
vm.selectedItem = vm.itemlist[0];
}
});
})();
Code for the View component:
(function () {
"use strict";
var module = angular.module('app');
function controller(GetService) {
var vm = this;
vm.$onInit = function () {
vm.doprdown1url = "/Controller/Action1";
vm.doprdown2url = "/Controller/Action2";
vm.dd1List = [];
vm.dd2List = [];
GetService.get(vm.doprdown1url, null).then(function (data) {
vm.dd1List = JSON.parse(data.data);
});
GetService.get(vm.doprdown2url, null).then(function (data) {
vm.dd2List = JSON.parse(data.data);
});
//vm.dd1List = [{
// id: 0,
// name: 'Arm'
//}, {
// id: 1,
// name: 'Leg'
//}, {
// id: 2,
// name: 'Hand'
//}];
//vm.dd2List = [{
// id: 0,
// name: 'Eye'
//}, {
// id: 1,
// name: 'Nose'
//}, {
// id: 2,
// name: 'Ear'
//}];
}
}
module.component("view1", {
template:
<p>
<drop-down placeholder="Title" itemlist="vm.dd1List"></drop-down>
<drop-down placeholder="Title2" itemlist="vm.dd2List"></drop-down>
</p>,
controllerAs: "vm",
controller: ["$http", controller]
});
}());