AngularJS：限制下拉列表中的選擇（使用angularMultipleSelect）

我被困在這個問題上：我試圖限制用戶從可用下拉選擇列表中選擇的數量。該列表來自數據庫，因此它不是一個硬編碼的選項列表。我目前正在使用angularMultipleSelect，它的工作很好的滿足了這個需求。AngularJS：限制下拉列表中的選擇（使用angularMultipleSelect）

如果用戶超過最大選擇，我想將字段設置爲無效，以便用戶無法保存表單。然後，用戶應該刪除一個或多個選擇，直到做出有效的選擇，然後該字段應重置爲有效。我已經嘗試使用：

後選項目（可angularMultipleSelect一個指令）
NG-變化
自定義的驗證指令，這些工作

無。我可以使用ng-&自定義驗證指令在同一表單中處理其他輸入字段，但不能在「多個自動完成」標記上工作。當用戶從下拉列表中進行選擇時，不會觸發任何內容。

下面是與選擇後項目方法一起使用的代碼的簡單示例。我試圖限制用戶從'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); 
};

同樣，沒有被觸發此控制器時做出選擇（在控制檯檢查）。

有沒有我不正確的做法，還是有另一種方法可以用來滿足這個要求？

謝謝。

來源

2016-11-15 CT-Meta

您可以嘗試使用$watch來觀察模型中的更改。

E.g.

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

每當您的「selectedCats」值發生變化以及首次初始化該值時，都會觸發此事件。

來源

2016-11-15 00:13:09

是的，我試了$ scope.watch並得到了相同的結果。什麼都沒發生。在其他領域以相同的形式進行測試，它的工作。使用Anglaur Multiple Select，似乎選擇的值不會通過這些方法觸發任何事情。一旦表單提交，我可以讓它做一個驗證檢查，但它不是一個好的解決方案。 –

AngularJS：限制下拉列表中的選擇（使用angularMultipleSelect）

回答

相關問題