将过滤器添加到 Angular 中的选择框选项列表中答案

【问题标题】：Adding filter to a list of select box options in Angular将过滤器添加到 Angular 中的选择框选项列表中
【发布时间】：2016-04-02 08:44:02
【问题描述】：

我正在尝试过滤使用 ng-repeat 生成的选择框中出现的选项。如果在一个选择框中选择了特定选项，则它不应显示在其他附加的选择框中。我尝试使用自定义过滤器，但它导致 Angular 出现语法错误。

<html ng-app="myApp" ng-controller="myCtrl">
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">   </script>
   <script src="app.js"></script>
</head>
<body>
    <ul>
        <li ng-repeat="element in segments">
            <input type="text" name="comment" ng-model="element.comment">

            <select name="mySelect" id="mySelect" ng-options="employee.name for employee in employeeList|selected track by employee.name" ng-model="employeeName" ng-change="exclude(employeeName.name)"></select>
        </li>
    </ul>
    <button type="button" ng-click="addSegment()">Add segment</button>
</body>
</html>

这是脚本

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

myApp.controller('myCtrl', function($scope) {
    $scope.segmentId = 0;
    $scope.segments = [];
    $scope.employeeList = [{'name' : 'jhon','isAssigned' : 0},{'name' :'wayne','isAssigned' : 0},{'name' : 'clark','isAssigned' : 0}];
    $scope.addSegment = function () {
        var segment = {
            'id' : $scope.segmentId,
            'assignedTo' : null,
            'comment' : null
        };
        $scope.segments.push(segment);
        $scope.segmentId++;
        console.log($scope.employeeList);
    };
    $scope.exclude = function (userName) {
        for (var i = 0; i < $scope.employeeList.length; i++) {
        var employee = $scope.employeeList[i].name;
        if (employee == userName) {
            $scope.employeeList[i].isAssigned = 1;
        }
    }
};

});

myApp.filter('selected', function() {
   return function() {
     if(employee.isAssigned == 0) {
        return employee;
     }
   return;
 };
 });

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

你需要使用一个指令和一个过滤器，我第一眼就猜到了。我确信这可以优化，事实上我把它留给自己作为练习。

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

myApp.controller('myCtrl', function($scope) {
    // The array where the selections are being kept
    $scope.segments = [0];
    $scope.segment = {item: undefined};
    // The list from which the select field is being populated
    $scope.list = [{name: 'one'}, {name: 'two'}, {name: 'three'}, {name: 'four'}];
    // When you add a selection to the segments array
    $scope.addSegment = function () {
        if ($scope.segment != undefined && $scope.segment.item != undefined && $scope.segment.item != '') {
            $scope.segments.push($scope.segment);
            $scope.selected = '';
            $scope.segment = {item: undefined};
        }
    };

    // We are using this function to dynamically set the selected item
    $scope.setItem = function (item) {
        $scope.segment = {item};
    };
});

// The directive that allows you to have an isolcated scope
myApp.directive('item', function () {
    return {
        template: '<select ng-options="employee.name for employee in list| hideSelected:segments:index:selected" ng-model="selected" ng-change="setItem"></select>',
        restrict: 'E',
        scope: {
            list: '=',
            selected: '=',
            segments: '=',
            index: '=',
            setItem: '='
        },
        replace: true
    };
});

// The filter that looks complicated but worls nonetheless ;)
myApp.filter('hideSelected', function () {
    return function (list, segments, i, selected) {
        array = [];
        looped = false;
        angular.forEach(list, function (item, key) {
            duplicate = false;
            angular.forEach(segments, function (segment, index) {
                looped = true;
                if (segment != 0 && item.name == segment.item.name && selected.name != item.name) {
                    duplicate = true;
                }
            });
            if (!duplicate) {
                array.push(item);
            }
        });
        if (!looped) {
            return list;
        }else{
            return array;
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp" ng-controller="myCtrl">
    <body>
        <ul>
            <li ng-repeat="element in segments track by $index">
                <item list="list" set-item="setItem(selected)" selected="selected" index="$index" segments="segments"></item>
            </li>
        </ul>
        <button type="button" ng-click="addSegment()">Add segment</button>
        <script src="app.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

指令

使用简单的内联模板
为指令创建一个隔离范围

过滤器

遍历列表项和段数组中的选定项
检查是否在循环中显示项目

如果您找到更优雅的解决方案，请与我们分享！

希望我能帮上忙:)

【讨论】：

【解决方案2】：

你没有在你的函数中传递employee

这样试试

myApp.filter('selected', function() {
  return function(employee) {
   return employee.isAssigned == 0 ;
  };
});

【讨论】：

【解决方案3】：

您可以为此使用这种格式的过滤器。试试这个。

  <select name="mySelect" id="mySelect" ng-options="employee.name for employee in modal.employeeList | filter:{isAssigned:0}" ng-model="employeeName" ng-></select>

var myapp = angular.module('app', []);
myapp.controller('Main', function ($scope) {
 var vm = this;
   vm.employeeList = [{'name' : 'jhon','isAssigned' : 1},{'name' :'wayne','isAssigned' : 0},{'name' : 'clark','isAssigned' : 0}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "app">
  <div ng-controller="Main as ctrl">
<div class="select-style">
   <select name="mySelect" id="mySelect" ng-options="employee.name for employee in ctrl.employeeList | filter:{isAssigned:0}" ng-model="employeeName" ng-change="exclude(employeeName.name)"></select>
</div>
   </div>
</div>

【讨论】：