Question

我使用Angular.Js ng-options指令解决了一个问题，这里我有两个选择输入：

    <select ng-model="vm.societie" ng-options="societie as societie.name for societie in vm.societies track by societie.id" ng-change="vm.getPrograms(vm.societie.id)">
    </select>
    <select name="filter-categories" ng-options="program.name for program in vm.programs" ng-model="vm.program">
    </select>

getPrograms（）函数执行一个HTTP请求，该请求获取新数据以更新用于显示第二个选择输入选项的vm.programs的值。

function getPrograms (id) {
        serviceMain.programsGET(function(res, status, headers, config) {
            if (res.status > 400 && res.status < 600)
                alertMsg.send(res.status, "danger");
            else {
                if (id) {
                    vm.programs = [];
                    for (var i = 0;i < res.data.length;i++) {
                        if (res.data[i].society_id == id)
                            vm.programs.push(res.data[i]);
                    }
                    console.log(vm.programs);
                } else {
                    vm.programs = res.data;
                }
            }
        }, function(err, status, headers, config) {
            if (err)
                alertMsg.send(err.error.message, "danger");
        }, '?no_limit');
    }

这里我清空vm.programs然后按下想要的数据以显示在第二个选择输入中。

我的问题是数据已更新，但绑定未在显示屏上显示，因为选项在第二个选项上仍然可见。

编辑1： 这里有一个 jsfiddle 我正在尝试重现的例子，除了getPrograms函数用于从API获取数据。我发现它在HTTP请求上下文中按预期工作。

编辑2： 我设法使用ng-if指令显示新数据，如下所示：

vm.display = true;
function getPrograms (id) {
        vm.display = false;
        serviceMain.programsGET(function(res, status, headers, config) {
            if (res.status > 400 && res.status < 600)
                alertMsg.send(res.status, "danger");
            else {
                if (id) {
                    vm.programs = [];
                    for (var i = 0;i < res.data.length;i++) {
                        if (res.data[i].society_id == id)
                            vm.programs.push(res.data[i]);
                    }
                    console.log(vm.programs);
                    vm.display = true;
                } else {
                    vm.programs = res.data;
                    vm.display = true;
                }
            }
        }, function(err, status, headers, config) {
            if (err)
                alertMsg.send(err.error.message, "danger");
        }, '?no_limit');
    }

Http请求确实需要时间来解决，因此DOM元素需要重新同步

希望这很清楚，感谢。

Answer 1

getPrograms中的API调用是异步执行的。因此，在请求完成之前，显示旧数据或不显示数据。您需要确保用户无法通过禁用下拉列表或覆盖加载指示符（类似this）从第二个下拉列表中选择任何选项，直到API返回数据。

更新ng-options值取决于另一个

1 个答案: