Как обновить опции выбора после выбора опции

Question

У меня есть список выбора, параметры которого основаны на выбранном значении. Например, выбранная опция по умолчанию равна 7, а остальные четыре опции всегда находятся в пределах 2 от этого значения. Поэтому изначально [5, 6, 7, 8, 9] - мои варианты.

Если пользователь выбирает 5, то опции выбора ДОЛЖНЫ обновляться до [3, 4, 5, 6, 7]. Действительно, запрос POST, привязанный к ng-change, срабатывает успешно и после обновления страницы доступны следующие параметры: [3, 4, 5, 6, 7]. Моя проблема в том, что эти параметры не обновляются мгновенно при выборе опции. В настоящее время необходимо обновить страницу, чтобы увидеть это изменение.

Ниже приведен соответствующий код. В основном я ищу, чтобы массив maxOptions мгновенно обновлялся при выборе опции.

HTML:

<select ng-options="option for option in linked.maxOptions" ng-model="linked.selectedMax" ng-change="linked.changeMax()"></select> 

Контроллер:

var vm = this; 
vm.maxOptions = []; 

var getplayerInfo = function() { 
    playersService.getPlayerInfo({ 
    playerId: playerId 
    }).$promise.then(function(player) { 
    vm.player = player; 
    for (var i = player.max_points - 2; i < customer.max_points + 3; i++) { 
     vm.maxOptions.push(i); 
    } 
    vm.selectedMax = player.max_points; 
    }); 
}; 

var init = function() { 
    getplayerInfo(); 
}; 

init(); 

vm.changeMax = function() { 
    playersService.setMaxPoints({ 
    playerId: playerId, 
    max: vm.selectedMax 
    }, {}).$promise.then(function(res){ 
    return res.success; 
    }, function(res) { 
    alert('Couldn\'t update number of points to ' + vm.selectedMax + ':' + res.success); 
    }); 
}; 

Я думаю, что мне нужно сделать что-то в пределах резолюции $promise для обновления пользовательского интерфейса мгновенно.

Answer 1

Ваш maxOptions массив обновляется только в getplayerInfo, который вызывается в init. Нет кода для обновления maxOptions, когда вы вызываете changeMax. Поэтому maxOptions устанавливается только на загрузку страницы, но не на изменение.

Вам нужно сделать что-то подобное в своем changeMax.

vm.changeMax = function() { 
    playersService.setMaxPoints({ 
    playerId: playerId, 
    max: vm.selectedMax 
    }, {}).$promise.then(function(res){ 
    vm.player.max_points = vm.selectedMax; 
    vm.maxOptions = []; 
    for (var i = player.max_points - 2; i < customer.max_points + 3; i++) { 
     vm.maxOptions.push(i); 
    } 
    return res.success; 
    }, function(res) { 
    alert('Couldn\'t update number of points to ' + vm.selectedMax + ':' + res.success); 
    }); 
}; 

Или еще лучше, абстрактное построение массива в качестве модели метод, как это и назвать его с обеих функций:

vm.updateMaxOptions = function() { 
     vm.maxOptions = []; 
     for (var i = player.max_points - 2; i < customer.max_points + 3; i++) { 
      vm.maxOptions.push(i); 
     } 
}; 

vm.changeMax = function() { 
    playersService.setMaxPoints({ 
    playerId: playerId, 
    max: vm.selectedMax 
    }, {}).$promise.then(function(res){ 
    vm.player.max_points = vm.selectedMax; 
    vm.updateMaxOptions(); 
    return res.success; 
    }, function(res) { 
    alert('Couldn\'t update number of points to ' + vm.selectedMax + ':' + res.success); 
    }); 
};