HTML DropDownListから選択したオプション値を取得します

Question

私はDropDownListを持っています。ユーザーはオプションを選択してデータベースに保存する必要があります。私は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> 

私は上記DropDownListの値を示しますが、選択から値を取得し、スコープにそれを渡すために立ち往生することができます。私はこれも、愚かなものを試した：

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

しかし、それは動作しません。 saveProductsは値を渡しているオブジェクト（スコープ）ですが、上記の手順でオプション値を渡すことができる簡単な方法はありますか？

私は、データベース内のデータを保存するためにやっているものをここで

、それがオプション値を除いて正常に動作し、上記で値を取得することができないのです。

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'); 
     }); 
    } 
}); 

これは私が持っているだけで合格する出力でありますそれからオプション値：

アップデート1 - これは私が試したものですが、私は次のように使用して、アラートの方法で値を表示することができます：

<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コントローラー：

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'); 
     }); 
    } 
}); 

注：それはのTextBox入力値が保存されますが、のDropDownListで立ち往生。選択したオプション値を取得してデータベースに保存できません。

Answer 1

選択したオプションを保存するプロパティが必要です。 ng-optionsを使用してドロップダウンをレンダリングできます。

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

ここで、選択要素のngモデルはselectedCategoryに設定されています。だからあなたのメソッドを追加するにアクセスすることができますし、保存するために使用します。

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

Answer 2

ngOptionsを使用します。その後、角に...

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

読むthe ngOptions documentationがニーズに応じて微調整する

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

：あなたのCategoriesデータの構造に応じて、あなたのような何かを行うことができます。