заполнить выпадающий список из списка стран - angularjs

Question

Ниже приведен мой фрагмент из контроллера Java-весны для возврата списка состояний

Вот пример результата 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"
        }
    }
]

Я использую конечную точку в угловых единицах, как показано для получения списка состояний.

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

Список состояний никогда не отображается, а выпадающий список состояний не заполняется.

Answer 1

Я думаю, что проблема связана с вашей ссылкой на массив и, конечно, как и в предыдущем случае, так как вы должны помещать элементы в массив.

попробуйте ниже кода, он будет работать

Примечание: незапустите код во фрагменте, он не будет запускать bcoz angular lib и ссылки на него не добавляются

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

<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>

Answer 2

Будьте осторожны с тем, на что вы ссылаетесь в своем шаблоне.

Во-первых, ваш ctrl.states (ссылка на шаблон) не является тем же объектом состояний (ссылка на контроллер).

Решите, хотите ли вы использовать экземпляр контроллера или $ экземпляр экземпляра для привязки вашего ссылки.

---

Работа с $ 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 в тег optionпотому что вам не нужно повторять компиляцию более чем одного выбора, вместо этого вам нужно добавить опцию для каждого элемента вашего states объекта.

Удалить также эти классы, потому что это двигатель Angularэто добавит их при обнаружении ngModel в элементе .

Надеюсь, это поможет.