【问题标题】:Angular ng-repeat filter on nested array in object对象中嵌套数组上的角度 ng-repeat 过滤器
【发布时间】:2016-03-09 09:57:09
【问题描述】:

我正在尝试基于嵌套数组在我的 ng-repeat 中应用过滤器。用于 ng-repeat 的对象:

更新

master_array:

   {
  "0": {
    "Employee_Id": "hni",
    "comptencies": [
      {
        "Title": "Bunker Knowledge",
        "Level": 1
      },
      {
        "Title": "Bunker Knowledge",
        "Level": 3
      },
      {
        "Title": "IT Compliance",
        "Level": 2
      },
      {
        "Title": "Bunker Knowledge",
        "Level": 5
      }
    ],
  }
}

JS:

$scope.myFilter = {
    competencyTitle : ""
}

HTML:

<label>Competencies
<select ng-model="myFilter.competencyTitle" ng-options="item.Title for item in competencies_list"></select>
</label>


<tr ng-repeat="item in master_array | filter: { competencies: [{ Competency.Title: myFilter.competencyTitle }] }">

上面的不行。

案例

我有一个员工列表,每个员工都有一个 ID 和附加的能力数组。此数组中的每个项目都附加了一个能力数组,其中包含标题和能力的 id。我想要的是能够过滤掉具有特定能力的员工。

有什么建议吗?

【问题讨论】:

  • 您指的是能力列表,但它应该是能力。
  • competencies_list 用于创建选择选项。这些值与master_array 中的值相同,所以没有。

标签: javascript angularjs


【解决方案1】:

我找到了解决方案。您可能必须使其适应您的特定代码:

主要思想是这样的:filter: { $: {Title: myFilter.competencyTitle.Title} }

$ 选择其子元素为 Title 的任何元素。

html

<label>Competencies {{myFilter.competencyTitle.Title}}
    <select ng-model="myFilter.competencyTitle" ng-options="item.Title for item in competencies_list"></select>
</label>


<p ng-repeat="item in master_array | filter: {  $: {Title: myFilter.competencyTitle.Title}  }">{{item.employee_id}} {{item.competencies}}    </p>

js - 这是使用的模型,我不确定这是否反映了您的实际模型。

$scope.competencies_list = [{Title : "Math"},{Title : "English"},{Title : "Spanish"}];

$scope.master_array = 
[
    {         
        employee_id: "hni",         
        competencies:
            [
                {Title : "Math", "Level": 1},
                {Title : "English", "Level": 2}           
            ]
    }, 
    {
        employee_id: "xyz",         
        competencies:
            [
                {Title : "Spanish", "Level": 3},
                {Title : "English", "Level": 5}           
            ]
    }
];

$scope.myFilter = {
    competencyTitle : ""
};

【讨论】:

  • 您在上面发布的“对象”不是我理解的有效 json 和 javascript。
  • 我将编辑“对象”以表示其真实表示。它在我的生产代码中有效。这只是为了展示结构。但是我从您的代码中得到一个错误:Error: [filter:notarray] Expected array but received: {}
  • “当过滤器不与数组一起使用时会发生此错误”。确保 master_array 是一个数组。能发一下master_array的结构吗?
  • 我已经更新了操作中的对象。还对结构做了一些小改动。
  • 别在意最后的评论。你很准!谢谢
猜你喜欢
  • 2015-09-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-01-22
  • 2016-03-28
  • 2020-05-28
相关资源
最近更新 更多