AngularJS：（angularMultipleSelectを使用して）ドロップダウンリストからの選択を制限します

Question

私はこの問題を抱えています：ユーザーが使用可能なドロップダウン選択リストから選択できる数を制限しようとしています。リストはデータベースから取り出されます。したがって、ハードコーディングされたオプションリストではありません。私は現在、angularMultipleSelectを使用しています。

ユーザーが最大の選択肢を超えた場合は、フィールドを無効に設定して、ユーザーがフォームを保存できないようにします。有効な選択が行われるまで、ユーザは1つまたは複数の選択を削除し、フィールドを有効にリセットする必要があります。私が使って試してみた：

• 後の選択項目（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

$watchを使用して、モデルの変更を監視できます。

など。

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

これは、「selectedCats」の値が変更され、初めて値を初期化するたびにトリガーされます。