如何验证 ng-repeated 下拉类别选择器?
How can I validate an ng-repeated dropdown category selector?
我创建了一个嵌套类别模型。为了 select 产品的类别,您会看到一个包含主要类别的下拉列表。当您 select 一个时,会在右侧添加一个新的下拉列表,其中包含您 select 编辑的子类别。重复此操作,直到您到达最后一个级别。发生这种情况时 $scope.product.category_id
已设置。当 $scope.product.category_id
为 null
时,我想使整个字段集无效。
我一直在使用 angular-bootstrap-show-errors for validation and I tried to mix it with ui-utils 来实现这个,使用自定义函数:validate_category()
.
这是我使用的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
更新。
您的select正在使用
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);
}
这不是理想的答案,但这是我能得到的最好的答案。真可惜,这太简单了:
<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)"
required // !!!
>
</select>
就是这样,只是添加了 required
属性。这个问题是因为我没有验证 product.category_id
但只是验证所有下拉列表不为空。我想我
必须依赖 select_category()
.
上的代码
我创建了一个嵌套类别模型。为了 select 产品的类别,您会看到一个包含主要类别的下拉列表。当您 select 一个时,会在右侧添加一个新的下拉列表,其中包含您 select 编辑的子类别。重复此操作,直到您到达最后一个级别。发生这种情况时 $scope.product.category_id
已设置。当 $scope.product.category_id
为 null
时,我想使整个字段集无效。
我一直在使用 angular-bootstrap-show-errors for validation and I tried to mix it with ui-utils 来实现这个,使用自定义函数:validate_category()
.
这是我使用的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
更新。
您的select正在使用
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);
}
这不是理想的答案,但这是我能得到的最好的答案。真可惜,这太简单了:
<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)"
required // !!!
>
</select>
就是这样,只是添加了 required
属性。这个问题是因为我没有验证 product.category_id
但只是验证所有下拉列表不为空。我想我
必须依赖 select_category()
.