Question

我坚持这个问题：我试图限制用户可以从可用的下拉列表选择列表中选择的数量。该列表是从数据库中提取的，因此它不是硬编码选项列表。我目前正在使用angularMultipleSelect，它的工作正好符合这一要求。

如果用户超出最大选择范围，我想将该字段设置为无效，以便用户无法保存表单。然后，用户应删除一个或多个选择，直到进行有效选择，然后该字段应重置为有效。我尝试过使用：

after-select-item（angularMultipleSelect可用的指令）
NG-变化
自定义验证指令

这些都不起作用。我可以得到改变和改变自定义验证指令可以处理相同表单中的其他输入字段，但不能处理'multiple-autocomplete'标记。当用户从下拉列表中进行选择时，不会触发任何操作。

以下是使用after-select-item方法的代码的简单示例。我试图将用户从'cats'数组中的可用选项限制为3个或更少。

HTML：

<multiple-autocomplete ng-model="selectedCats" name="selectedCats" object-property="name" after-select-item="afterSelectItem" required suggestions-arr="cats"> </multiple-autocomplete>

Controller.js：

$scope.afterSelectItem = function(selectedCats) {
    var catLength = $scope.selectedCats.length;        
    var valid = (catLength <= 3);
    $scope.myStoryForm.selectedCats.$setValidity("maxLength", valid);
 };

同样，在进行选择时（在控制台检查），此控制器中不会触发任何内容。

有什么我做得不对，还是有其他方法可以用来满足这个要求？

感谢。

Answer 1

您可以尝试使用$scope.$watch("selectedCats", function (newValue, oldValue) { var catLength = newValue.length; var valid = (catLength <= 3); $scope.myStoryForm.selectedCats.$setValidity("maxLength", valid); });来观察模型中的更改。

E.g。

 vertical-align: middle;

每次你的＆＃34; selectedCats＆＃34;值更改以及第一次初始化值。

AngularJS：从下拉列表中限制选择（使用angularMultipleSelect）

1 个答案: