如何限制md-multiple-select中的选项选择?

时间:2017-06-23 06:00:20

标签: angularjs material-design angular-material multi-select

我需要限制用户从多选选项中仅选择2个选项.....我检查了多个限制,例如multiple-limit="value here" ... 这是Codepen ....

2 个答案:

答案 0 :(得分:2)

正如我在问题评论中所读到的那样,指令中的限制选择(尚未)支持开箱即用。但是,我们可以采取以下解决方法来实现类似的目标:

我们会添加一个ng-change来监听指令' ng-model,并为我们提供最新价值。然后我们决定最新值是否超出了选择的限制,如果是,我们为模型分配一个最大选择的先前保存的副本。

假设以下示例中的限制为2:

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

Working codepen

答案 1 :(得分:1)

对不起,这是我的自定义指令:

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

此外,您可以为模型使用验证器,并通知用户他无法选择更多元素的原因。此外,您可以直接在模板中使用验证器名称。

更多信息:https://docs.angularjs.org/api/ng/type/ngModel.NgModelController