Neelam Prajapati Neelam Prajapati - 5 months ago 16
AngularJS Question

dropdown value disappears when select

I have one select in which I bind data from database by get method.it binds data perfectly in select.but when I select one of it option .its disappears..any help appreciated.

This is my HTML Code:

<select class="form-control" ng-model="MainCategory" ng-options="main.Name for main in MainCategory track by main.ID" placeholder="Select Main Category">
<option value=""></option>
</select>


this is my contoller code

var baseURL = 'http://localhost:50928/api/ProductAPI/';
var MainCategory = [];
url = baseURL + "GetMainCategoryList";
$http.get(url)
.success(function (data) {
$scope.MainCategory = data;
console.log(data);

}).error(function (data) {
console.log(data);

});

Answer

Your ng-options data is MainCategory and your ng-model is binded to it as well. This means that selecting an options turns your data to one value only - your selected option. In your case you should have a data property, lets say - categories. Like this:

ng-options="main.Name for main in categories track by main.ID"

In addition you will hold in your controller another property for the selected Category and ng-model will bind to it:

ng-model="selectedCategoty"