如何使用 $filter('filter') 按对象数组中的特定字段进行过滤

2024-05-02

我想使用 $filter('filter') 过滤员工对象数组,以仅根据可以从下拉列表/选择中选择的员工的名字字段来过滤结果。请注意,我不想在 ng-repeat 中使用“| filter:”。

困难在于名称字段是另一个名为“details”的字段的属性,因此我不能像下面的代码那样使用details.name,因为它会出错。

$scope.filteredEmployees = $filter('filter')(employees, {details.name: selectedName }); 

请参阅下面的员工数组对象的结构。

我如何告诉它使用 $filter('filter') 根据details.name 字段过滤记录?

预先感谢您的帮助!

这是代码:

Var selectedName = “An”;
$scope.filteredEmployees = $filter('filter')(employees, {**details.name:** selectedName });
Var employees  = [
      {
        Date: 01/01/2012
        details: {
          name: ‘An’,
      age: 25

        }
      },
      {
        Date: 01/01/2012
        details: {
          name: ‘'Bill',
      age: 20

        }
            }];

    //Here is 
    <select ng-model="selectedName" ng-options="e for e in employees" data-ng-show="employees.length > 0" ng-change="filterEmployees">
        <option value="">All Employees</option>
    </select><br>

    function filterEmployees()  {
        $scope.filteredEmployees = $filter('filter')(employees, "Joe");
    };

表达式可以是属性到过滤器的映射: http://docs.angularjs.org/api/ng/filter/filter其中对象中的每个属性都映射到结果集中的相应属性。

$filter('filter')(employees, {name:"Joe"});

现场演示 http://jsfiddle.net/jwcarroll/VfEcp/


使用自定义函数

如果您的数据比较复杂,并且需要更高级的过滤,那么您可以简单地传入自定义谓词函数来评估是否应该过滤某个项目。

函数的输入将数组的每一项作为参数,并预计返回false是否应从结果集中排除该项目。

var people = [{date:new Date(), details:{
    name: 'Josh',
    age: 32
}}, {date:new Date(), details:{
    name: 'Jonny',
    age: 34
}}, {date:new Date(), details:{
    name: 'Blake',
    age: 28
}}, {date:new Date(), details:{
    name: 'David',
    age: 35
}}];

$scope.filteredPeople = $filter('filter')(people, function(person){
    return /^Jo.*/g.test(person.details.name);
});

现场演示 http://jsfiddle.net/jwcarroll/Fgxyu/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 $filter('filter') 按对象数组中的特定字段进行过滤 的相关文章

  • 如何删除 ng-repeat 的默认顺序

    如何停止动态表数据的 ng repeat 内部的默认排序 目前我收到以下订单 地址 客户 ID 姓名 但我想要的是以下顺序 客户 ID 名称 地址 任何帮助我将不胜感激 JS app controller MyController func
  • 单元测试依赖注入

    我对茉莉花和业力是全新的 我相信我的环境设置正确 并且我能够运行非常基本的单元测试 但是一旦我尝试实例化控制器 我就会收到未知提供程序错误 并且我不确定如何调试它 我需要传入 stateProvider 依赖项吗 我在角种子示例中没有看到这
  • Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Headers

    我试图通过发布请求将文件发送到我的服务器 但是当它发送时会导致错误 Access Control Allow Headers 不允许请求标头字段 Content Type 所以我用谷歌搜索了错误并添加了标题 http post rootSc
  • 包含routeChangeSuccess的AngularJS测试控制器

    我正在尝试创建单元测试来测试导航列表控制器 但在创建测试时遇到问题 这是控制器的代码 navListModule controller NavListCtrl scope NavList function scope NavList sco
  • 当请求新页面时,如何将 AngularJS 路由与 Express (Node.js) 结合使用?

    我正在使用 Express 它从静态目录加载 AngularJS 一般情况下我会要求http localhost 其中 Express 为我服务index html以及所有正确的 Angular 文件等 在我的 Angular 应用程序中
  • 如何清除单个函数中的所有 AngularJS $scope 和 $rootScope 值?

    我需要清除所有 scope执行某些操作时的值 例如 如果我点击 Signout 按钮重定向到 signin 页面 然后所有 scope or rootScope应清除会话中的值 我怎样才能实现这个目标 您可以执行以下操作 rootScope
  • 在 Angular 中让多个调用等待同一个 Promise

    我在一个页面上有多个使用相同服务的控制器 为了举例 我们将服务称为 USER 第一次调用 USER getUser 时 它会发出 http 请求来获取有关用户的数据 调用完成后 它将数据存储在 USER data 中 如果再次调用 USER
  • 如何在 angular-ui 中动态禁用 ui-sortable 指令

    我正在使用 Angular ui 使用 ui sortable 指令进行排序 是否可以根据范围状态动态启用 禁用可排序功能 因此 我需要一个按钮来更改范围属性的状态 并且根据此属性可排序是否应该工作 角度指令支持观察可排序选项何时发生变化
  • 为什么 angularjs bootstrap datepicker 选择前一天?

    我在用着AngularJS引导日期选择器指令 http angular ui github io bootstrap 当我从模型中设置日期时 它会选择所选日期之前的一天
  • 如何使用 ng-repeat 更改 AngularJS 中特定 的背景颜色

    如何为每一行设置不同的背景颜色 举个例子 第 1 行 蓝色 第2行 红色 第三行 绿色 main js scope names fName John lName David fName Richard lName Daniel fName
  • ngRepeat 中的函数执行过于频繁

    我有三个tabs里面有不同的htmlng include 这些选项卡使用以下方式显示ng repeat 只有一个 HTML 模板包含函数调用 但它执行了 3 次 每个模板执行一次 ng repeat迭代 这里出了什么问题以及如何解决它 va
  • Jhipster 生成器跳过 --skip-server 处的身份验证代码

    为什么当我们使用 skip server 生成项目时 哟 jhipster skip server 部分身份验证丢失 在 AJS A2 上 是吗 每次我需要粘贴部分代码 Angular 上的 AuthServerProvider 或 Ang
  • 如何禁用 Angular 数据表中数据的初始排序?

    我正在使用角度数据表 并且只有一列 当我绑定它时 数据按升序排列 而我想按我收到的顺序显示它 有人可以帮忙吗 控制器 var vm this vm dtOptions DTOptionsBuilder newOptions withButt
  • Angular 中有主控制器好吗?

    我不知道这是否是一个好的做法 我在路由配置中定义了一个控制器 但是因为我的HomeCtrl is in ng if他听不到的声明loginSuccess所以我做了MainCtrl它监听loginSuccess并做出适当的反应 这段代码工作得
  • 指令中的 Angular + 茉莉花 + 模拟 $stateParams

    在指令中模拟 stateParams 的最佳方法是什么 stateParam成员会根据测试而改变 我可以使用 controller ctrl stateParams 轻松模拟控制器中的 stateParams 但不知道如何修改注入指令的 s
  • AngularJS 指令的完整列表?

    我正在学习 AngularJS 是否有所有开箱即用指令的完整列表 这FAQ http docs angularjs org misc faq提及ng repeat ng show and ng class 但我感觉还有更多 奇怪的是我找不到
  • 如何发布数组多维角度js

    我在 angularjs 中有一个数组 示例如下 scope order qty 20 scope order adress Bekasi scope order city Bekasi 这个数组可以用这个代码发布 http method
  • AngularJS 创建全局键盘快捷键的方式是什么?

    我想我应该使用指令 但将指令添加到正文似乎很奇怪 但监听文档上的事件 执行此操作的正确方法是什么 更新 找到 AngularJS UI 并看到their https docs angularjs org api ng directive n
  • Angularjs 范围之外的服务功能

    我在 angularJS 中创建了一个服务 它使用 btford socket io 模块与服务器交互 由于在服务中我已经实现了一些目前在 Angular 内部使用的 API 但为了以后扩展应用程序 我还需要在 Angular 范围之外提供
  • 将函数传递给指令以在链接中执行的正确方法

    我知道我们通常通过隔离范围将函数传递给指令 directive myComponent function return scope foo 然后在模板中我们可以这样调用这个函数

随机推荐