从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

使用ngOptions。根据{{​​1}}数据的结构，您可以执行以下操作：

Categories

然后，在Angular ......

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

根据您的需要阅读the ngOptions documentation进行调整。

Answer 2

您应该拥有存储所选选项的属性。您可以使用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-model设置为selectedCategory。因此，在您的添加方法中，您可以访问该方法并将其用于保存。

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