Menu
I have an ASP.Net WebAPI project that I run from VS that supplies data in the form of JSON to my Angular project. I get the data from the webapi via an $http.get call like so:
function CarController($scope, $http) {
$http.get('http://localhost:1246/api/values')
.success(function (data, status, headers, config) {
$scope.carSet = data;
})
.error(function (data, status, headers, config) {
$scope.error = status;
alert("You be broken buddy!");
});
}
Then the carSet is bound in the html like this:
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title></title>
<script src="scripts/controllers/controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="CarController">
<select data-ng-model="carSet" onchange="DataChanged()" data-ng-options="c.Color for c in carSet"></select>
</div>
</body>
</html>
Everything works great. I get my list. The first entry is blank and that is ok for now.
THE PROBLEM:
When I select any of the items in the dropdown list, the entire list is cleared out and there are no more items to select from?? Whaaaaat! At this point I am clearly frustrated. This behavior only happens when I use the $http mechanism to retrieve data from the WebApi. It does not happen if I use the $http.get to retrieve json data from a file or other locally created data stores. I just need a simple dropdown list that will allow me to use it's selected values for filtering other data (another db call.)
I would show you pics.. but this is my very first post.. and well.... I can't.
Any help is greatly appreciated. Thanks.
815
asked Dec 03 '25 12:12
Change data-ng-model="carSet" to something different e.g. data-ng-model="carChosenColor" and it will work fine.
Then in $scope.carChosenColor will store the chosen value.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
