CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-filter
ttmt
ttmt

Reputation: 4984

Angularjs ng-repeat filter based on json value

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>

Upvotes: 1

Views: 8348

Answers (2)

chris
chris

Reputation: 1817

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>

Upvotes: 1

Chandermani
Chandermani

Reputation: 42669

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

Upvotes: 6

Related Questions