javascript - 根据其他选择过滤选择选项

Question

我有一个优先级为(1、2、3)的数组，用作多个选择框中的选项。我希望每个优先级只能选择一次。因此，如果在一个选择框中选择“2”，则应在其他选择框中将其删除或禁用。 我找到了一个过滤器here但它并没有让它在我的代码中工作。

HTML:

<div ng-repeat="object in objects">
    <md-select ng-model="selectedPriority[$index].priority" ng-change="selectedPriority[$index].objectId = object.id" >
        <md-option ng-value="priority" ng-repeat="priority in priorities | arrayDiff:priorities:selectedPriority[$index].priority">{{ priority }}</md-option>
    </md-select>
</div>

JS:

.controller('Ctrl', function ($scope, $filter) {
    $scope.selectedPriority = [ ];
    $scope.data = [];
    $scope.priorities = ['1', '2', '3'];
    $scope.objects = [{"date": "2017-01-08", "duration": 120}, {"date": "2017-01-07", "duration": 120}]
})

.filter('arrayDiff', function() {
    return function(array, diff) {
        var i, item,
            newArray = [],
            exception = Array.prototype.slice.call(arguments, 2);

        for(i = 0; i < array.length; i++) {
            item = array[i];
            if(diff.indexOf(item) < 0 || exception.indexOf(item) >= 0) {
                newArray.push(item);
            }
        }

        return newArray;

    };
});

这是我的代码的一部分: http://plnkr.co/edit/ZXp5kKJaFZcKdur2xueS?p=preview

Answer 1

我使用 ng-options 创建了一个示例，该示例使用 disable when 表达式。

Usage :

label disable when disable for value in array track by trackexpr

第二个“disable”是一个表达式，如果计算结果为 true，将禁用该选项(您可以通过简单地将其替换为 true 来测试它)。我在下面创建了一个示例:

HTML

<div ng-app="test" ng-controller="MainCtrl">
    <select 
      ng-options="o as o disable when second == o for o in options"
      ng-model="first"
      ng-change="change(first)">
    </select>

    <select
      ng-options="o as o disable when first == o for o in options"
      ng-model="second"
      ng-change="change(second)">
    </select>
</div>

JS

angular.module('test', [])
.controller('MainCtrl', function($scope) {
    $scope.options = [1, 2, 3];
    $scope.change = function(selection) {
      console.log(selection);
    }
});

在此示例中，第一个 ng-options 指令跟踪第二个 ng-options 指令的 ng-model，反之亦然。如果一个选项等于另一个选项的 ng-model 的值，则该值将被禁用。

对象数据源的“禁用时间”表达式略有不同，请参阅 documentation关于它的使用。

Plunkr