AngularJS:限制下拉列表中的选择(使用angularMultipleSelect)

Question

我被困在这个问题上:我试图限制用户可以从可用的下拉选择列表中选择的数量。列表是从数据库中提取的，所以它不是硬编码的选项列表.我目前正在使用angularMultipleSelect，它的工作原理可以很好地满足这一需求。

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

• 后置选择项(angularMultipleSelect提供的指令)
• ng-变化
• 自定义验证指令

这些都不管用。我可以获得ng-change &定制验证指令，以便在相同形式的其他输入字段上工作，但不能在“多自动完成”标记上工作。当用户从下拉列表中进行选择时，不会触发任何内容。

下面是与后置选择项方法一起使用的代码的一个简单示例。我试图限制用户从“猫”数组中的可用选项中选择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

您可以尝试使用$watch来监视模型中的更改。

例如。

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

每当您的"selectedCats“值发生变化时，以及您第一次初始化该值时，都会触发此操作。