2017-06-23 22 views
1

は、私がここに は私のようCodepen ....md-multiple-selectのオプションの選択を制限する方法は?

+2

私の知る限りは、Googleやマニュアルを参照してくださいとして明示的な解決策はありません。私は自分のmd-select-max-selection指示文を書いてこのシナリオを扱います。 – Ursache

+0

@Ursache ....これで材料面からこれを達成する方法が今あるのですか? –

+0

私は何も見つけることができません。他の提案を見ることができます:) – Ursache

答えて

2

です...私はmultiple-limit="value here"のように複数の制限を確認.....複数選択オプションからわずか2オプションを選択するようにユーザーを制限する必要があります質問のコメントを読んで、選択を制限することは(まだ)ディレクティブからすぐにサポートされていません。しかし、次のような回避策を講じて、達成できるようにすることができます。

ng-changeを追加し、指令のng-modelを聞き、最新の値を返します。最新の値が選択の限界を超えたかどうかを判断します。もしそうならば、以前に保存したコピーを最大の選択肢でモデルに割り当てます。リミットを仮定

は、以下の例では、2:

https://codepen.io/anon/pen/bRoNWx

link: function(scope, element, attrs, ngModel) { 
     scope.$watch(function() { 
       return ngModel.$modelValue; 
      }, function(newValue, oldValue) { 
       if (newValue && newValue.length > attrs.mdSelectMaxSelection) { 
       ngModel.$setViewValue(oldValue); 
       ngModel.$render(); 
       } 
      }); 
    } 

:後半の答えを

$scope.changed = function(val) { 
    if(val && val.length > 2) { 
    $scope.myModel = $scope.prevModel; 
    } else { 
    $scope.prevModel = val; 
    } 
} 

Working codepen

+0

興味深い....しかし、コンソールを開くだけで、変更機能でconsole.logにvalを入れて、最初、2番目、3番目のボックスをチェックしてください.... 3番目にチェックされた値が含まれています。 ....これは必須の値ではありません –

+0

@SaEChowdaryそれは上書きされます..あなたはそれをログに記録していますか?あなたはcodepenをフォークし、ここで共有できますか? – tanmay

+0

私の悪い仲間....私はビューの部分をチェックしなかった....これはうまく、私は何かを持っている場合あなたに戻ってくるでしょう –

1

申し訳ありませんが、ここに私のカスタムディレクティブですまた、モデルにバリデーターを使用することもできますなぜ要素を選択できないのかをユーザーに通知します。さらに、テンプレート内のバリデータ名を直接使用することもできます。

詳細情報:https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

+0

おかげで..... –

関連する問題