java - 从国家列表中填充州的下拉菜单 - angularjs

Question

下面是我从 java spring Controller 返回状态列表的片段

以下是 postman 用于获取与国家/地区 ID 相关的州/地区的示例 json 结果。

[
    {
        "id": 1,
        "name": "state1",
        "country": {
            "id": 1,
            "name": "MyCountry"
        }
    },
    {
        "id": 2,
        "name": "state2",
        "country": {
            "id": 1,
            "name": "MyCountry"
        }
    },
    {
        "id": 3,
        "name": "state3",
        "country": {
            "id": 1,
            "name": "MyCountry"
        }
    },
    {
        "id": 4,
        "name": "state4",
        "country": {
            "id": 1,
            "name": "MyCountry"
        }
    },
    {
        "id": 5,
        "name": "state5",
        "country": {
            "id": 1,
            "name": "MyCountry"
        }
    }
]

我正在使用如图所示的 Angular 端点来获取状态列表。

                var myJSON = res.data;
                var states = [];
                angular.forEach(myJSON, function (item)
                        {
                    states.push(item);
                        });
                alert("500 "+ states);

状态列表永远不会显示，状态的下拉列表也永远不会被填充。

Answer 1

请注意您在模板中引用的内容。

首先，您的 ctrl.states (模板引用)与 states ( Controller 引用)不是同一个对象。

决定是否要使用 Controller 实例或$scope实例来绑定(bind)您的引用。

<小时/>

使用$scope，您的 Controller 将是:

$scope.states = [] ;

angular.forEach(myJSON, function (item) {
    $scope.states.push(item);
});

模板:

<label>State</label>
<select ng-model="state" name="state" required >

    <option ng-repeat="s in states" value="{{s.name}}">{{s.name}}</option>
</select>

我将 ngRepeat 移至选项标记，因为您不需要迭代编译多个选择，而是需要为状态的每个元素添加一个选项 em> 对象。

也删除这些类，因为当在元素上检测到 ngModel 时，Angular 引擎将添加这些类。

希望有帮助。