在Angular的另一個變量中使用變量？

Question

我試圖使用此組件 https://github.com/alexklibisz/angular-dual-multiselect-directive 但我不知道如何將數據從後端傳遞到組件。

我從後端獲取數據：

var vm = this; 
vm.Categoria1 = []; 
$http.get('http://localhost:5541/api/date/ListCategorii').success(function (data) { 
    vm.Categoria1 = data; 
} 
); 

我得到的數據：

[{"Id":1,"NumeCategorie":"Fructe"},{"Id":2,"NumeCategorie":"Legume"},{"Id":3,"NumeCategorie":"Ciocolata"}] 

但低於vm.Categoria1是空的：

$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 1

最好的做法是用這樣的：

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"); 
}); 

希望幫助！ Sa-mi spui daca ai問題。

Answer 2

您需要在成功回調設置demoOptions：

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

應設置在請求成功的項目：

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

Answer 4

另一種選擇是，你可以創建一個函數包含http.get 呼叫和呼叫在頁面加載該功能：

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();