CODEWITHSUNDEEP
javascriptangularjs
TietjeDK
TietjeDK

Reputation: 1207

Angular ng-repeat filter on nested array in object

I'm trying to applay a filter in my ng-repeat based on a nested array. The object that is used for the ng-repeat:

Updated

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 }] }">

The above doesn't work.

Case

I have a list of employees and each employee has an id and array of competencies attached. Each item in this array has a comptency array attached, which holds the title an id of the competency. What I want is to be able to filter out employees with specific competencies.

Any suggestions?

Upvotes: 0

Views: 1409

Answers (1)

lisa p.
lisa p.

Reputation: 2158

I found a solution. You probably have to adapt it to your specific code:

The main idea is this: filter: { $: {Title: myFilter.competencyTitle.Title} }

The $ selects any element whose child is 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 - this is the model is used, I'm not sure if this reflects your actual model.

$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 : ""
};

Upvotes: 1

Related Questions