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;

    };
});

这是我的代码的plunker： 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

第二个“禁用”是一个表达式，如果计算结果为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模型的值，那么该值将被禁用。

对象数据源的“禁用时”表达式略有不同，请参阅documentation其使用情况。

Plunkr

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

1 个答案: