Use variable in another variable in Angular? - angularjs

Question

i'm trying to use this component
https://github.com/alexklibisz/angular-dual-multiselect-directive
but I don't know how could I pass data from the back-end to the component.
I get the data from the back-end:
var vm = this;
vm.Categoria1 = [];
$http.get('http://localhost:5541/api/date/ListCategorii').success(function (data) {
vm.Categoria1 = data;
}
);
I get the data:
[{"Id":1,"NumeCategorie":"Fructe"},{"Id":2,"NumeCategorie":"Legume"},{"Id":3,"NumeCategorie":"Ciocolata"}]
but below vm.Categoria1 is empty:
$scope.demoOptions = {
title: 'Demo: Recent World Cup Winners',
filterPlaceHolder: 'Start typing to filter the lists below.',
labelAll: 'All Items',
labelSelected: 'Selected Items',
helpMessage: ' Click items to transfer them between fields.',
/* angular will use this to filter your lists */
orderProperty: 'name',
/* this contains the initial list of all items (i.e. the left side) */
items: vm.Categoria1, //[{ 'id': '50', 'name': 'Germany' }, { 'id': '45', 'name': 'Spain' }, { 'id': '66', 'name': 'Italy' }, { 'id': '30', 'name': 'Brazil' }, { 'id': '41', 'name': 'France' }, { 'id': '34', 'name': 'Argentina' }],
/* this list should be initialized as empty or with any pre-selected items */
selectedItems: []
};
Thank you.

Answer 1

The best practice is to use like this :
var vm = this;
vm.Categoria1 = [];
$http.get('http://localhost:5541/api/date/ListCategorii')
.success(function(data) {
vm.Categoria1 = data;
$scope.demoOptions = {
title: 'Demo: Recent World Cup Winners',
filterPlaceHolder: 'Start typing to filter the lists below.',
labelAll: 'All Items',
labelSelected: 'Selected Items',
helpMessage: ' Click items to transfer them between fields.',
/* angular will use this to filter your lists */
orderProperty: 'name',
/* this contains the initial list of all items (i.e. the left side) */
items: vm.Categoria1, //[{ 'id': '50', 'name': 'Germany' }, { 'id': '45', 'name': 'Spain' }, { 'id': '66', 'name': 'Italy' }, { 'id': '30', 'name': 'Brazil' }, { 'id': '41', 'name': 'France' }, { 'id': '34', 'name': 'Argentina' }],
/* this list should be initialized as empty or with any pre-selected items */
selectedItems: []
})
.error(function(data, status) {
console.error('Repos error', status, data);
})
.finally(function() {
console.log("finally finished repos");
});
Hope that helps ! Sa-mi spui daca ai probleme.

Answer 2

You need to set demoOptions in the success callback:
var vm = this;
vm.Categoria1 = [];
$http.get('http://localhost:5541/api/date/ListCategorii').success(function (data) {
vm.Categoria1 = data;
$scope.demoOptions = {
title: 'Demo: Recent World Cup Winners',
filterPlaceHolder: 'Start typing to filter the lists below.',
labelAll: 'All Items',
labelSelected: 'Selected Items',
helpMessage: ' Click items to transfer them between fields.',
/* angular will use this to filter your lists */
orderProperty: 'name',
/* this contains the initial list of all items (i.e. the left side) */
items: vm.Categoria1, //[{ 'id': '50', 'name': 'Germany' }, { 'id': '45', 'name': 'Spain' }, { 'id': '66', 'name': 'Italy' }, { 'id': '30', 'name': 'Brazil' }, { 'id': '41', 'name': 'France' }, { 'id': '34', 'name': 'Argentina' }],
/* this list should be initialized as empty or with any pre-selected items */
selectedItems: []
};
});

Answer 3

Other option is, you can create one function contains that http.get
call and call that function on page load :
var vm = this;
vm.Categoria1 = [];
var onload = function(){
$http.get('http://localhost:5541/api/date/ListCategorii').success(function (data) {
vm.Categoria1 = data;
}
};
$scope.demoOptions = {
title: 'Demo: Recent World Cup Winners',
filterPlaceHolder: 'Start typing to filter the lists below.',
labelAll: 'All Items',
labelSelected: 'Selected Items',
helpMessage: ' Click items to transfer them between fields.',
/* angular will use this to filter your lists */
orderProperty: 'name',
/* this contains the initial list of all items (i.e. the left side) */
items: vm.Categoria1, //[{ 'id': '50', 'name': 'Germany' }, { 'id': '45', 'name': 'Spain' }, { 'id': '66', 'name': 'Italy' }, { 'id': '30', 'name': 'Brazil' }, { 'id': '41', 'name': 'France' }, { 'id': '34', 'name': 'Argentina' }],
/* this list should be initialized as empty or with any pre-selected items */
selectedItems: []
};
onload();

Answer 4

You should set the items in the request success :
$http.get('http://localhost:5541/api/date/ListCategorii')
.success(function (data) {
$scope.demoOptions.items = vm.Categoria1 = data;
});