如何限制md-multiple-select中選項的選擇？

我需要限制用戶選擇從多選的選項只有2個選項.....我有多個限制檢查一樣multiple-limit="value here" ... 這裏是Codepen ....如何限制md-multiple-select中選項的選擇？

來源

2017-06-23 Sa E Chowdary

據我看到谷歌和文檔沒有明確的解決方案。我會寫我自己的md-select-max-selection指令並在那裏處理這個場景。 – Ursache

@Ursache ....所以現在有辦法從材料方面做到這一點？ –

我無法找到任何。讓我們看看其他建議:) – Ursache

正如我在問題評論中閱讀，限制選擇尚未（不）支持該指令的開箱即用。但是，我們可以採取以下解決方法來獲得類似的結果：

我們將添加一個ng-change，它監聽指令的ng-model，併爲我們提供了最新的值。然後我們決定最新值是否超出了選擇的限制，如果是這樣，我們爲模型指定一個先前保存的具有最大選擇的副本。

假設限制是在下面的示例2：

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

Working codepen

來源

2017-06-23 06:36:48 tanmay

有趣....但只是打開控制檯，將val放在console.log中更改函數，並檢查第一，第二和第三個框....您的val包含第三個選中的值，這意味着ng模型持有。 ....這不是所需的值 –

@SaEChowdary它會被覆蓋在下面..你在哪裏控制檯登錄它？你可以在這裏分享代碼並分享嗎？ – tanmay

我的壞伴侶....我沒有檢查視圖部分....這是好的，將回到你，如果我有任何疑問 –

對不起，回答晚了，這裏是我的自定義指令：

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(); 
       } 
      }); 
    }

你也可以使用模型的驗證器，並通知用戶爲什麼他不能選擇更多的元素。此外，您可以直接在您的模板中使用驗證器名稱。

來源

2017-06-24 20:32:54 Ursache

感謝兄弟..... –

如何限制md-multiple-select中選項的選擇？

回答

相關問題