angularjs - 如何验证ng重复的下拉类别选择器？

我创建了一个嵌套类别模型。为了选择产品的类别，您会看到一个包含主要类别的下拉列表。当您选择一个类别时，一个新的下拉列表将添加到右侧，并将其子类别添加到您选择的类别中。重复此操作，直到达到最后一个级别。发生这种情况时，将设置$scope.product.category_id。当$scope.product.category_id为null时，我想使整个字段无效。

我一直在使用angular-bootstrap-show-errors进行验证，并尝试使用自定义函数validate_category()将它与ui-utils混合以实现这一目的。

这是我使用的HTML:

<span ng-repeat="parent_id in category_dropdown_parents" show-errors="{ skipFormGroupCheck: true }">
    <select class="form-control" name="category_id"
        ng-init="selected_category[$index] = init_select($index);"
        ng-model="selected_category[$index]"
        ng-options="category.name for category in (categories | filter : { parent_id: parent_id } : true ) track by category.id "
        ng-change="select_category(selected_category[$index], $index)"

        ui-validate="'validate_category()'" // added this to work with ui-utils

        >
    </select>
    <span ng-if="$index+1 != category_dropdown_parents.length">/</span>
</span>

这是我的简单验证功能:

$scope.validate_category = function() {
    return  (   $scope.product.category_id !== null
            &&  $scope.product.category_id !== undefined);
}

但这是行不通的。有想法吗？

编辑:我刚刚意识到，与此有关的问题是对ui-validate的验证功能是在ng-change函数之后执行的，因此它永远无法检查$scope.product.category_id更新。

最佳答案

您的选择正在使用

ng-model="selected_category[$index]"

但是验证功能正在使用

$scope.product.category_id

它不应该使用吗

ui-validate="'validate_category($index)'"

和

$scope.validate_category = function($index) {
    return($scope.selected_category[$index] !== null
    && $scope.selected_category[$index] !== undefined);
}