根据其他选择过滤选择选项 [英] Filter select options based on other selection

问题描述

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

HTML:

 < div ng-repeat =对象中的对象">< md-select ng-model ="selectedPriority [$ index] .priority" ng-change ="selectedPriority [$ index] .objectId = object.id">< md-option ng-value ="priority" ng-repeat =优先级| arrayDiff:priorities:selectedPriority [$ index] .priority"> {{优先级}}</md-option></md-select></div> 

JS:

  .controller('Ctrl'，函数($ 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(){返回函数(数组，差异){var i，项目，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);}}返回newArray;};}); 

这是我的代码的笨拙之处: http://plnkr.co/edit/ZXp5kKJaFZcKdur2xueS?p=preview

解决方案

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

用法:

当通过trackexpr禁用数组跟踪中的值时，

  label禁用 

第二个禁用"是一个表达式，如果将其评估为true，则将禁用该选项(您可以通过将其替换为 true 来对其进行测试).我在下面创建了一个示例:

HTML

 < div ng-app ="test" ng-controller ="MainCtrl"><选择ng-options ="o as o当第二个== o为options中的o时禁用ng-model ="first"ng-change ="change(first)"></select><选择ng-options ="o as o当options中的o的第一个== o时禁用ong-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的值，则该值将被禁用.

对象数据源的禁用时间"表达式略有不同，请参见文档说明其用法.

Plunkr

I have an array with priorities (1, 2, 3) used as options in multiple select boxes. I want each of the priorities to be selectable only once. So if in one select box '2' is selected, it should be removed or disabled in the other select boxes. I found a filter here but it didn't get it to work in my code.

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;

    };
});

Here is the plunker of my code: http://plnkr.co/edit/ZXp5kKJaFZcKdur2xueS?p=preview

解决方案

I've created an example using ng-options which uses the disable when expression.

Usage:

label disable when disable for value in array track by trackexpr

The second "disable" is an expression that, if evaluated to true, will disable that option (you can test this out by simply replacing it with true). I've created an example below:

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

In this example, the first ng-options directive keeps track of the ng-model of the second ng-options directive, and vice versa. If an option is equal to the value of the other's ng-model, then that value will be disabled.

The "disable when" expression is slightly different for an object data source, see the documentation on its usage.

Plunkr

这篇关于根据其他选择过滤选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！