javascript - AngularJS - 如何进行级联选择并保存到 API

Question

我有以下 JSON 文件，其中列出了国家/地区及其所在州:

[
    {
        "value": "Australia",
        "text": "Australia",
        "states": [
            {
                "value": "Australian Capital Territory",
                "text": "Australian Capital Territory"
            },
            {
                "value": "New South Wales",
                "text": "New South Wales"
            }
        ]
    }

]

我将数据加载到名为countriesAndStates的变量中，然后将其显示在前端:

            <div class="form-group">
                <label for="country" class="col-sm-2 control-label">Country</label>
                <div class="col-sm-3">
                    <select class="form-control" id="country" data-ng-model="project.country" data-ng-options="country.value as country.text for country in countriesAndStates">
                        <option disabled value="">Select</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="country" class="col-sm-2 control-label">State</label>
                <div class="col-sm-3">
                    <select class="form-control" id="state" data-ng-model="project.state" data-ng-options="state.value as state.text for state in countriesAndStates.states" data-ng-disabled="!countriesAndStates.states">
                        <option disabled value="">Select</option>
                    </select>
                </div>
            </div>

我还从 REST API 加载数据以将其显示在前端:

    var detailProject = Restangular.one('projects', $routeParams.projectId);
    detailProject.get().then(function (project) {
        $scope.project = project;

        $scope.saveProject = function () {
            project.put().then(processSuccess, processError);
        };

    });

单击“保存”后，saveProject 函数会将数据传回 API。

现在...我如何将州与国家联系起来？

根据我在文档中的理解，我需要更改 ng-model 属性以反射(reflect)国家和州......如下所示:

<select id="country" ng-model="states" ng-options=""></select>
<select id="state" ng-disabled="!states" ng-options=""></select>

但是我有点困惑，当我想要将 API 数据加载到选择框中时，我该怎么做？

Answer 1

我认为这样的事情会起作用......

您可以按project.country过滤选项。我还放置了一个 ng-disabled 指令，以防止他们在没有先选择国家/地区的情况下在此下拉列表中选择选项。

<select  ng-disabled="!project.country" ng-model="selectedState" 
ng-options="state.value as state.text for state in countriesAndStates.states | filter:{text: project.country}"></select>