Question

我正在尝试构建一种方法来限制用户在几个选择字段中的选择。下面是一个示例，这里是一个jsfiddle - http://jsfiddle.net/HB7LU/18414/

HTML：

<div ng-controller="MyCtrl">
  <select size="5" id="selectpicker1" multiple ng-model="params.monthly" ng-change="selectionChanged(params.monthly)">
     <option ng-repeat="month in newMonthlyArray">{{month}}</option>
  </select>

</div>

控制器：

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    //console.log('YES');
    $scope.newMonthlyArray = ["2015-Jan", "2015-Feb", "2015-Mar", "2015-Apr"];
    $scope.selectionChanged = function (data) {
        if (data.length > 2) {
            alert('You can choose 2 months');
        }
    }

}

我遇到问题的部分是删除最后选择的选项并更新$scope变量。我可以使用JQuery，但不想创建混合解决方案。

任何想法将不胜感激！

Answer 1

您可以在select元素中获取对其他所选项目的引用，并取消选择这些项目。在selectionChanged方法中，迭代select元素中的选项，取消选择无效选择，然后更新模型（data，这是对params.monthly的引用）。

angular.forEach(document.getElementById("selectpicker1").options, function(item) {
  if (data.length > 2 && item.selected) {
    data.splice(2);
    item.selected = false;
  }
});

您可以使用$ watch服务来简化操作并删除自己的监视方法（selectionChanged）：

$scope.$watch(function() {
  // In this function, return whatever object/value you would like to observe. 
  // This function is invoked whenever there is a change to the specified value/obj
  return document.getElementById("selectpicker1").options;
}, function (items) {
  // The argument of this function holds the new value of what you return in the 
  // first function. Feel free to name it whatever you wish
  angular.forEach(items, function(item) {
    var data = $scope.params.monthly;
    if (data.length > 2 && item.selected) {
      data.splice(2);
      item.selected = false;
      alert('You can choose 2 months');
    }
  });
});

通常您需要清理/取消注册您的监视功能，但在这种情况下，您不需要，因为没有其他方法/功能依赖于您的选择元素的值。

Answer 2

你不必为了删除额外的选定元素而做那么多：

if(data.length > 2){
    data.splice(2);
    //alert('You can choose 2 months');
}

基本上，您只需要data就是您的ng-model="params.monthly" 由于此模型绑定到select元素，因此Angular将完成剩下的工作以更新它：

http://jsfiddle.net/HB7LU/18420/

编辑：正如@Metallica建议的那样，并非所有情况下都会由Angular更新select元素。

提供视觉反馈的唯一方法是手动更新DOM：

if(data.length > 2) {
    data.splice(2);
    var selected = select.querySelectorAll('option:checked');
    angular.forEach(selected, function(s) {
        if(data.indexOf(s.value) < 0) s.selected = false;
    });
}

在更新的示例select中$element[0].querySelector('select') 此控制器中的select元素。

附加代码是：

获取所有选定的选项元素和
迭代元素并检查它们是否存在于模型数据中并相应地更新selected属性

更新小提琴： http://jsfiddle.net/HB7LU/18422/

Answer 3

使用ng-options。查看我的fork

<select (...) ng-options="month for month in newMonthlyArray">

在控制器中，删除最后选择的（使用lodash）：

if(data.length > 2){
  alert('You can choose 2 months');
  data = _.pull(data, _.last(data))
}

Answer 4

将此添加到您的控制器：

$scope.onSelect = function() {
    var selected = this.month;
    $scope.newMonthlyArray.splice($scope.newMonthlyArray.indexOf(selected), 1);
};

这是你的标签：

<option ng-click="onSelect()" ...

Angularjs - 在选择字段中设置用户选择的限制

4 个答案: