Вот мой выбор:
<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);
}
старайтесь не использовать одно и то же имя var для ng-model = vehicle "и ng-repeat =" vehicle as...
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>
Попробуйте использовать ng-options
<select ng-model="vehicle" ng-options="k as k.VehicleName for k in vehicles" >
</select>