Почему этот AngularJS не заполняет мой выпадающий список?

0

Вот мой выбор:

<select class="dropdownInForm" ng-model="vehicle">
    <option ng-repeat="vehicle in vehicles" value="vehicle.VehicleID">{{vehicle.VehicleName}}</option>
</select>

Вот как я загружаю данные в свой угловой контроллер:

$http.post('VehicleEdit.aspx/GetVehicles', { vendorID: $scope.vendorID, placeID: $scope.placeID})
            .then(function (response) {
                $scope.vehicles = response.data;
                $scope.vehicle = $scope.vehicles[0];
            })

И вот что содержит answer.data:

"[{"VehicleID":1,"VehicleName":"test1","IsActive":false},{"VehicleID":1,"VehicleName":"test2","IsProgrammatic":true}]"

Вытащить из базы данных работает, поскольку я отлаживаю ее в Chrome и вижу, что $ scope.vehicles заполняется вышеуказанным JSON. Однако это раскрывающееся меню не будет заполняться, независимо от того, что я пытаюсь сделать.

Где я иду не так?

РЕДАКТИРОВАТЬ --

Я должен был заметить, что я тоже пробовал это так, без везения:

<select class="dropdownInForm" ng-model="vehicle" ng-options="vehicle.VehicleId as vehicle.VehicleName for vehicle in vehicles"></select>

Вот WebMethod, который перенастраивает JSON:

    [WebMethod]
    public static string GetVehicles(int placeID, int vendorID)
    {
        JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();

        DataSet vehiclesData = VehicleLogic.GetListOfVehicles(placeID, vendorID);

        List<Vehicle> vehicles = new List<Vehicle>();

        foreach(DataRow row in vehiclesData.Tables[0].Rows)
        {
            Vehicle vehicle = new Vehicle()
            {
                VehicleID = Convert.ToInt32(row["VehicleID"]),
                VehicleName = row["VehicleName"].ToString().Trim(),
                IsProgrammatic = Convert.ToBoolean(row["IsProgrammatic"])
            };

            vehicles.Add(vehicle);
        }

        return jsonSerializer.Serialize(vehicles);
    }
Теги:

3 ответа

0

старайтесь не использовать одно и то же имя var для ng-model = vehicle "и ng-repeat =" vehicle as...

0

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.vehicles = [{
      "VehicleID": 1,
      "VehicleName": "test1",
      "IsActive": false
    }, {
      "VehicleID": 1,
      "VehicleName": "test2",
      "IsProgrammatic": true
    }];
    $scope.vehicle = $scope.vehicles[0];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-model="vehicle" ng-options="vehicle as vehicle.VehicleName for vehicle in vehicles"></select>
  <div>
    Selected Vehicle: {{vehicle | json}}
  </div>
</div>

value не является директивой "Угловая", поэтому при установке value для элементов <option> вам необходимо использовать {{vehicle.VehicleID}}. Однако гораздо лучше использовать ng-options:

<select class="dropdownInForm" ng-model="vehicle" ng-options="vehicle.VehicleID as vehicle.VehicleName for vehicle in vehicles"></select>
  • 0
    Я тоже так пробовал, не повезло. Я отредактировал свой пост, чтобы отразить это.
  • 0
    Я могу заверить вас, что этот метод должен работать, о чем свидетельствует фрагмент кода, который я только что добавил в свой ответ. Если это не работает для вас, то есть ошибка где-то еще в коде, который вы нам не показали.
Показать ещё 4 комментария
0

Попробуйте использовать ng-options

<select ng-model="vehicle" ng-options="k as k.VehicleName for k in vehicles" >
</select>
  • 0
    Я тоже так пробовал, не повезло. Я отредактировал свой пост, чтобы отразить это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню