Angularjs ng-repeat filter based on json value

Question

I have a plunker here - http://plnkr.co/edit/AmoiJi8k000OKA6TNdcz?p=preview

I'm using dummy json here - http://myjson.com/4aqlh

I want to display the json content in different parts of the page based on a value in the json

So the stories with a value of Section: "New" will be displayed in one div and 'Old' in another.

This works in the first div where 'New' is dispalyed but in the second div that should only display 'Old', it displays all the stories.

Is there something wrong with the filter or is something to do with the order Angular builds the page.

        <div class="container" data-ng-controller="myCtrl">

            <div class="row">

                <div  class="col-sm-6">
                    <div class="story" data-ng-repeat="story in stories | filter: story.Section='New' " >
                        {{story.Title}}
                        {{story.Section}}
                    </div>
                </div>

                <div  class="col-sm-6">
                    <div class="story" data-ng-repeat="story in stories | filter: story.Section='Old' ">
                        {{story.Title}}
                        {{story.Section}}
                    </div>
                </div>

            </div>

        </div>

If you cannot find a solution you can always add an ng-if filtering the desired objects. — ShellFish
– ShellFish, Commented May 10, 2015 at 14:14

Chandermani · Accepted Answer · 2015-05-10 14:22:15Z

6

This is how you do filtering with filter

            <div  class="col-sm-6">
                <div class="story" data-ng-repeat="story in stories | filter: {Section:'New'}" >
                    {{story.Title}}
                    {{story.Section}}
                </div>
            </div>

            <div  class="col-sm-6">
                <div class="story" data-ng-repeat="story in stories | filter: {Section:'Old'}">
                    {{story.Title}}
                    {{story.Section}}
                </div>
            </div>

It takes an object syntax. = is an assignment operator. See filter documentation

answered May 10, 2015 at 14:22

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

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

Comments

chris · Accepted Answer · 2015-05-10 14:50:29Z

1

Specify the expression in the filter explicitly and it will work.

Working plunker: http://plnkr.co/edit/yLIO14rlWdCFKtmg3b3N?p=preview

<div class="container" data-ng-controller="myCtrl">

    <div class="row">

        <div  class="col-sm-6">
            <div class="story" data-ng-repeat="story in stories | filter: story: story.Section='New' " >
                {{story.Title}}
                {{story.Section}}
            </div>
        </div>

        <div  class="col-sm-6">
            <div class="story" data-ng-repeat="story in stories | filter: story: story.Section='Old' ">
                {{story.Title}}
                {{story.Section}}
            </div>
        </div>

    </div>

</div>

answered May 10, 2015 at 14:50

chris

1,8171 gold badge14 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angularjs ng-repeat filter based on json value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related