Question

以下是来自java spring controller的片段，用于返回状态列表

以下是邮递员提取的json结果，用于获取有关国家/地区ID的状态。

[
    {
        "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"
        }
    }
]

我正在使用角度消耗端点，如图所示获取状态列表。

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

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

Answer 1

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

首先，您的 ctrl.states （模板参考）与状态（控制器参考）不是同一个对象。

决定是否要使用 Controller实例或 $ scope instance 绑定您的参考。

使用 $ scope ，您的控制器将是：

$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 移动到选项标记，因为您不需要迭代编译多个选择，而是需要为状态的每个元素添加一个选项 object。

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

希望它有所帮助。

Answer 2

我认为问题在于您的数组引用，当然还有以前必须将项目推送到数组中。

尝试以下代码可以使用

注意：不要在代码片段中运行代码，它不会运行bcoz angular lib并且链接不会添加到其中

＆＃13;

var myJSON = [
    {
        "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"
        }
    }
];


$scope.states = [];
angular.forEach(myJSON, function(item) {
  $scope.states.push(item);
});

alert($scope.states); //alertsthe values

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<label>State</label>
<select ng-repeat="s in states" ng-model="state" formcontrol name="state" class="ng-untouched ng-pristine ng-invalid" required>
  <option value="{{s.name}}">{{s.name}}</option>
</select>

＆＃13;

填写国家列表中的州下拉列表 - angularjs

2 个答案: