对象中嵌套数组的角度ng-repeat过滤器

时间:2016-03-09 09:57:10

标签: javascript angularjs

我试图根据嵌套数组在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 }] }">

上述方法无效。

案例

我有一份员工清单,每位员工都有自己的能力和一系列能力。此数组中的每个项都附加了一个comptency数组,该数组将标题保留为能力的id。我想要的是能够过滤掉具有特定能力的员工。

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

我找到了解决方案。您可能必须根据您的特定代码进行调整:

主要想法是:过滤器:{$:{标题: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 : ""
};