基于json值的Angularjs ng-repeat过滤器答案

【问题标题】：Angularjs ng-repeat filter based on json value基于json值的Angularjs ng-repeat过滤器
【发布时间】：2015-05-10 14:07:30
【问题描述】：

我这里有一个笨蛋 - http://plnkr.co/edit/AmoiJi8k000OKA6TNdcz?p=preview

我在这里使用虚拟 json - http://myjson.com/4aqlh

我想根据json中的一个值在页面的不同部分显示json内容

因此，值为 Section: "New" 的故事将显示在一个 div 中，而 'Old' 将显示在另一个 div 中。

这适用于显示“新”的第一个 div，但在应该只显示“旧”的第二个 div 中，它会显示所有故事。

过滤器有问题还是与 Angular 构建页面的顺序有关。

        <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>

【问题讨论】：

如果您找不到解决方案，您可以随时添加ng-if 过滤所需的对象。
嗯...看起来很奇怪

标签： angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

这就是您使用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>

它采用对象语法。 = 是一个赋值运算符。见filter documentation

【讨论】：

【解决方案2】：

明确指定过滤器中的表达式，它将起作用。

工作人员：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>

【讨论】：