Javascript 将过滤器添加到“角度”中的“选择框”选项列表中_Javascript_Angularjs

Javascript 将过滤器添加到“角度”中的“选择框”选项列表中

javascript angularjs

Javascript 将过滤器添加到“角度”中的“选择框”选项列表中,javascript,angularjs,Javascript,Angularjs,我试图过滤使用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"&g

我试图过滤使用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;
 };
 });

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'myCtrl'，函数（$scope）{
$scope.segmentId=0；
$scope.segments=[]；
$scope.employeeList=[{'name'：'jhon'，'isAssigned'：0}，{'name'：'wayne'，'isAssigned'：0}，{'name'：'clark'，'isAssigned'：0}]；
$scope.addSegment=函数（）{
var段={
“id”：$scope.segmentId，
“assignedTo”：null，
“注释”：null
};
$scope.segments.push（段）；
$scope.segmentId++；
log（$scope.employeeList）；
};
$scope.exclude=函数（用户名）{
对于（变量i=0；i<$scope.employeeList.length；i++）{
var employee=$scope.employeeList[i].name；
如果（雇员==用户名）{
$scope.employeeList[i].isAssigned=1；
}
}
};
});
myApp.filter（'selected'，function（）{
返回函数（）{
如果（employee.isAssigned==0）{
返回员工；
}
返回；
};
});

您可以为此使用此格式的筛选器。试试这个

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

您可以为此使用此格式的筛选器。试试这个

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

您没有在您的函数中传递

employee

像这样试试

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

您没有在您的函数中通过

employee

像这样试试

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

您需要使用一个指令和一个过滤器，我猜这是第一眼看到的。我相信这是可以优化的，事实上，我把它留给你自己做练习

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'myCtrl'，函数（$scope）{
//保存所选内容的数组
$scope.segments=[0]；
$scope.segment={item:undefined}；
//从中填充选择字段的列表
$scope.list=[{name:'one'}，{name:'two'}，{name:'three'}，{name:'four'}]；
//将选定内容添加到“分段”阵列时
$scope.addSegment=函数（）{
如果（$scope.segment！=未定义&&$scope.segment.item！=未定义&&$scope.segment.item！=''）{
$scope.segments.push（$scope.segments）；
$scope.selected=''；
$scope.segment={item:undefined}；
}
};
//我们正在使用此函数动态设置所选项目
$scope.setItem=函数（项）{
$scope.segment={item}；
};
});
//允许您具有隔离作用域的指令
myApp.directive（'item'，function（）{
返回{
模板：“”，
限制：'E'，
范围：{
列表：“=”，
所选：“=”，
段：'='，
索引：'='，
setItem:'='
},
替换：正确
};
});
//看起来很复杂但仍然有效的过滤器；）
myApp.filter（'hideSelected'，函数（）{
返回函数（列表、段、i、选定）{
数组=[]；
循环=错误；
angular.forEach（列表、功能（项、键）{
重复=错误；
角度.forEach（段、函数（段、索引）{
循环=真；
if（segment！=0&&item.name==segment.item.name&&selected.name！=item.name）{
重复=正确；
}
});
如果（！重复）{
数组。推送（项目）；
}
});
如果（！循环）{
退货清单；
}否则{
返回数组；
}
};
});





添加段
您将需要使用一个指令和一个过滤器，我第一眼就猜到了。我相信这是可以优化的，事实上，我把它留给你自己做练习

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'myCtrl'，函数（$scope）{
//保存所选内容的数组
$scope.segments=[0]；
$scope.segment={item:undefined}；
//从中填充选择字段的列表
$scope.list=[{name:'one'}，{name:'two'}，{name:'three'}，{name:'four'}]；
//将选定内容添加到“分段”阵列时
$scope.addSegment=函数（）{
如果（$scope.segment！=未定义&&$scope.segment.item！=未定义&&$scope.segment.item！=''）{
$scope.segments.push（$scope.segments）；
$scope.selected=''；
$scope.segment={item:undefined}；
}
};
//我们正在使用此函数动态设置所选项目
$scope.setItem=函数（项）{
$scope.segment={item}；
};
});
//允许您具有隔离作用域的指令
myApp.directive（'item'，function（）{
返回{
模板：“”，
限制：'E'，
范围：{
列表：“=”，
所选：“=”，
段：'='，
索引：'='，
setItem:'='
},
替换：正确
};
});
//看起来很复杂但仍然有效的过滤器；）
myApp.filter（'hideSelected'，函数（）{
返回函数（列表、段、i、选定）{
数组=[]；
循环=错误；
angular.forEach（列表、功能（项、键）{
重复=错误；
角度.forEach（段、函数（段、索引）{
循环=真；
如果（段！=0&&item.name==segmen