AngularJS中用拼接字符串过滤数组：判断角色是否在允许列表内

嘿，我来帮你搞定这个问题！在AngularJS里要判断employeeRole数组里有没有permittedRoles中的任一角色，有几种实用的方法，我给你逐一拆解：

如果你想贴合AngularJS的框架用法，可以用内置的$filter服务来实现。首先记得在控制器里注入$filter，然后按下面的步骤来：

// 假设这是你的控制器
app.controller('RoleCheckController', ['$scope', '$filter', function($scope, $filter) {
  var employeeRole = ['Manager', 'Employee', 'Director', 'Supervisor', 'TeamLead'];
  var permittedRoles = 'Manager|Director';
  
  // 先把权限字符串拆成数组，方便后续匹配
  var permittedRoleList = permittedRoles.split('|');
  
  // 使用filter过滤出所有匹配的角色
  var matchedRoles = $filter('filter')(employeeRole, function(role) {
    // 检查当前角色是否在权限列表里
    return permittedRoleList.indexOf(role) !== -1;
  });
  
  // 只要过滤结果长度大于0，就说明存在匹配的角色
  var hasPermittedRole = matchedRoles.length > 0;
  
  console.log(hasPermittedRole); // 这里会输出true，因为数组里有Manager和Director
}]);

这个方法的好处是完全遵循AngularJS的服务模式，如果你需要在模板中复用过滤逻辑，还可以把它封装成自定义过滤器。

其实不用依赖AngularJS的filter，原生JS的some()方法天生就是用来做“任一匹配”判断的，代码更短也更高效：

var employeeRole = ['Manager', 'Employee', 'Director', 'Supervisor', 'TeamLead'];
var permittedRoles = 'Manager|Director';
var permittedRoleList = permittedRoles.split('|');

// some()会遍历数组，只要有一个元素满足条件就立刻返回true
var hasPermittedRole = employeeRole.some(function(role) {
  return permittedRoleList.includes(role);
});

console.log(hasPermittedRole); // 同样输出true

如果你的项目支持ES6+语法，还可以写成更简洁的箭头函数版本：

const hasPermittedRole = employeeRole.some(role => permittedRoles.split('|').includes(role));

如果你的权限规则需要支持模糊匹配或者忽略大小写，正则表达式会是更好的选择：

var employeeRole = ['Manager', 'Employee', 'Director', 'Supervisor', 'TeamLead'];
var permittedRoles = 'Manager|Director';

// 创建正则表达式，^和$确保完全匹配，i标志可选（开启忽略大小写）
var roleRegex = new RegExp(`^(${permittedRoles})$`, 'i');

// 用some()结合正则测试每个角色
var hasPermittedRole = employeeRole.some(role => roleRegex.test(role));

console.log(hasPermittedRole); // 输出true

比如如果你的数组里有manager（小写），加了i标志后也能匹配成功，灵活性更高。

总的来说，我更推荐用原生JS的some()方法，代码简洁且性能更好；如果是要在AngularJS模板中使用过滤后的结果，那$filter服务会更合适。

内容的提问来源于stack exchange，提问作者Swapper