How to filter a collection of objects in AngularJS

Question

I have a question model and this is the structure:

 {
    "id": 5,
    "description": "Does your site have Facebook?",
    "question_category_id": 3
  }

Also the question_category structure:

{
    "id": 1,
    "name": "Network",
    "description": "Network"
  }

Now I can fetch the whole list of questions from server side with AngularJs.

But I only want to display questions which are belong to category 1 (id=1) in Section 1, questions in category 2(id=2) in Section 2

And I like the view looks like this:

Network

Do you have Facebook?

Do you have Twitter?

University

What is your highest degree?

etc

etc...

I tried to write a filter :

       <ul class="questionsClass">
          <li ng-repeat="q in questions | filter:question_category_id = 1">
            {{q.description}}

          </li>
        </ul>

But it doesn't work.

Just cannot figure it out.

So I wonder how to write the js part and html part.

Thank you

Update

Now my html looks like this:

<table class="table table-striped table-bordered table-hover" id="dataTables-example" ng-controller="testControl">

        <div ng-repeat="qc in questionsCategories">
            <thead>
                <tr>
                    <th colspan="3" class="bg-success">{{qc.name}}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="q in questions | filter:{question_category_id : qc.id}">
                    <td class="text-center">{{q.id}}</td>
                    <td>
                        <span>{{q.description}}</span>
                        <a href="#" data-toggle="popover" title="" data-content="{{q.tip}}">
                            <i class="fa fa-info-circle fa-1x text-primary"></i>
                        </a>
                    </td>
                    <td>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline1" value="option1">Yes
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosInline" id="optionsRadiosInline2" value="option2">No
                        </label>
                    </td>
                </tr>
            </tbody>
        </div>

    </table>

But what I get is just a list of questions without categories. It looks like this:

Do you have Facebook?

Do you have Twitter?

What is your highest degree?

etc

Could anyone figure it out?

thank you.

Update 2

filter: {question_category_id : qc.id}

this filter performs "start with" not "equal to" action, which result in questions which are not in category 1,for example, but in category 10, are displayed in category 1 section.

I also tried :

filter: q.question_category_id == qc.id : true

Then only categories get displayed, and questions disappeared.

Now have no idea about what to do next...

Maybe this points you in right direction plnkr.co/edit/02Y3b7 — Mikko Viitala
– Mikko Viitala, Commented Aug 10, 2014 at 7:36
You can always create a custom filter - it is just JS code which you can then reference after the |. — metacubed
– metacubed, Commented Aug 10, 2014 at 7:45
You could use custom filter but for this it feels like an overkill. — Mikko Viitala
– Mikko Viitala, Commented Aug 10, 2014 at 8:24
hi @MikkoViitala thx a lot mate!!!haha now I can just display questions under a specific category. But how to display categories as well? My colleague(a front-end developer) put the mock all in a html table which makes hard for me to use ng-repeat. — Franva
– Franva, Commented Aug 10, 2014 at 8:42
hi @MikkoViitala Great~! It works now~! Thank you very much~! — Franva
– Franva, Commented Aug 12, 2014 at 10:54

Mikko Viitala · Accepted Answer · 2014-08-11 07:41:21Z

2

So if I understood right you have data with following structure.

// Categories
$scope.categories = [{
  "id": 1,
  "name": "Network",
  "description": "Network"
},{
  "id": 2,
  "name": "University",
  "description": "University"
}];

// Questions
$scope.questions = [{
  "id": 1,
  "description": "Does your site have Facebook?",
  "question_category_id": 1
},{
  "id": 2,
  "description": "Does your site have Twitter?",
  "question_category_id": 1
},{
  "id": 3,
  "description": "Did you go to University?",
  "question_category_id": 2
}]

Then your HTML template could look like.

<table ng-repeat="c in categories">
  <thead>
    <tr>
      <th>{{ c.id }}. {{ c.description }}</th>
    </tr>
  </thead>
  <tbody ng-repeat="q in questions | filter: { question_category_id: c.id } : true">
    <tr>
      <td>{{q.description}}</td>
    </tr>
  </tbody>
</table>

imgur

Example Plunker here http://plnkr.co/edit/pKXF8b

edited Aug 11, 2014 at 7:41

answered Aug 10, 2014 at 8:48

Mikko Viitala

8,3944 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Franva Over a year ago

Hi Mikko, I wrote exactly same to yours expect I have to use table. I can get questions displayed, but the categories just don't show up....Please see my update mate. thx

Franva Over a year ago

Hi Mikko, could you please try to use table to do the same presentation? I have to use table, because the front-end developer did it in that way and a jquery pulgin uses the table so I cannot realy convert it into divs. thanks

Franva Over a year ago

thx Mikko, but that makes multiple tables rather than 1 table contains multiple rows. Could we do it better?

kontur Over a year ago

You'd have to lose the thead/tbody so ng-repeat can iterate on one DOM elements, like so: plnkr.co/edit/qRVWcg?p=preview

Franva Over a year ago

hi @MikkoViltala, is it possible to limit the number of questions displayed under each category to only 1?

|

Collectives™ on Stack Overflow

How to filter a collection of objects in AngularJS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related