在Angular的另一个变量中使用变量？答案

【问题标题】：Use variable in another variable in Angular?在Angular的另一个变量中使用变量？
【发布时间】：2016-04-07 12:15:46
【问题描述】：

我正在尝试使用这个组件 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: []
};

谢谢。

【问题讨论】：

在设置 demoOptions 的时候，是否已经设置了 vm.Categoria1？因为 $http 调用是异步的，所以你可能只有在初始化 demoOptions 对象后才能收到结果。..

标签： angularjs multi-select

【解决方案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 questione。

【讨论】：

【解决方案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: []
    };
});

【讨论】：

【解决方案3】：

另一种选择是，您可以创建一个包含该 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();

【讨论】：

【解决方案4】：

您应该在请求成功中设置项目：

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

【讨论】：