CODEWITHSUNDEEP
angularjsasp.net-mvc
AT-2017
AT-2017

Reputation: 3149

Retrieve Selected Option Value From HTML DropDownList

I've a DropDownList where user has to select options and save it to database. I am using the following with AngularJs:

 <select>
    <option>----Please Select Sub-Category----</option>
    <option ng-repeat="m in Categories" value="{{ m.CategoryId }}" ng-model="saveProducts.CategoryId">{{ m.Category }}</option>
 </select>

I can show the values in the above DropDownList but stuck to retrieve the value from the selected and pass it to the scope. I've tried even this, a silly one:

 <select>
    <option>----Please Select Sub-Category----</option>
    <option ng-repeat="m in Categories" value="{{ m.CategoryId }}" ng-model="m.CategoryId">{{ m.Category }}</option>
 </select>

But that will not work. saveProducts is the object (scope) where I am passing values but is there any easy way where I can pass option value with the above procedure?

Here what I am doing to save data in database and it works fine except the option value, it's unable to retrieve values with the above:

productApp.controller('addProductController', function ($scope, $http) {
    $scope.addData = function () {

        $http({
            method: 'POST',
            url: '/Product/AddProductsToDb',
            data: $scope.saveProducts
        }).success(function () {
            $scope.saveProducts = null;

        }).error(function () {
            alert('Failed');
        });
    }
});

This is the output I have and just want to pass the option value from it:

Sample_Image
Update 1 - This is what I've tried but I can show the value in the alert method using as follows:

<select ng-model="saveProducts.ParentId"
        ng-options="m.Category for m in Categories track by m.CategoryId">
      <option value="">----Please Select Sub-Category----</option>
</select>

AngularJs Controller:

productApp.controller('addProductController', function ($scope, $http) {
$scope.addData = function () {
        angular.forEach($scope.saveProducts, function (model, index) {
            $scope.saveProducts.ParentId = (model.CategoryId);
        });

        alert($scope.saveProducts.ParentId);

        $http({
            method: 'POST',
            url: '/Product/AddProductsToDb',
            data: $scope.saveProducts
        }).success(function () {
            $scope.saveProducts = null;

        }).error(function () {
            alert('Failed');
        });
     }
});

Note: It saves TextBox input value but stuck with DropDownList. Unable to retrieve select option value and save it to database.

Upvotes: 0

Views: 1465

Answers (2)

Jorge Valle
Jorge Valle

Reputation: 637

Use ngOptions. Depending on the structure of your Categories data, you could do something like: 

<select ng-options="m as m.yourProperty for m in Categories" ng-model="selected"></select>

Then, in Angular...

$scope.selected = $scope.Categories[0];

Read the ngOptions documentation to tweak according to your needs.

Upvotes: 1

Shyju
Shyju

Reputation: 218762

You should have a property to store the selected option. You can use ng-options to render the dropdown.

<select ng-model="selectedCategory"
        ng-options="option.Category for option in Categories track by option.CategoryId ">
    <option value="">Select Option</option>
</select>

Now your select element's ng-model is set to selectedCategory. So in your add method you can access that and use that for saving.

$scope.addData = function () {
    console.log($scope.selectedCategory);
    //to do : use selectedCategory 
}

Upvotes: 1

Related Questions