Question

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

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

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

指令

使用简单的内嵌模板
为指令

过滤器

浏览列表项和段数组
检查是否在循环中显示该项目

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

希望我能提供帮助：）

Answer 2

你没有在你的职能中传递employee

试试这个

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

Answer 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>

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

3 个答案: