Question

我有一个显示城市信息的表格，并在每3个条目后开始一个新行。在我添加ng-if条件之前，我能够按城市，国家和大陆过滤每个条目。现在，无论我进入输入框进行过滤表，只返回整个第一行。这是怎么回事？（对不起，如果它不那么可读。）

<table align="center" ng-show="toggleFlag">
<tbody ng-if="$index%3==0" ng-repeat="item in pic|filter:pic.capital|filter:pic.country|filter:pic.continent">
<tr>
<td ng-if="$index<pic.length">
<img ng-src="{{pic[$index].image}}"><br><div>{{pic[$index].capital}} is the capital of {{pic[$index].country}},<br> which is located in       {{pic[$index].continent}}.</div>
</td>
<td ng-if="$index<pic.length-1">
<img ng-src="{{pic[$index+1].image}}"><br><div>{{pic[$index+1].capital}} is the capital of {{pic[$index+1].country}}
,<br> which is located in {{pic[$index+1].continent}}.</div>
 </td>
<td ng-if="$index<pic.length-2">
<img ng-src="{{pic[$index+2].image}}"><br><div>{{pic[$index+2].capital}} is the capital of {{pic[$index+2].country}},<br> which is located in {{pic[$index+2].continent}}.</div>
 </td>
 </tr>
 </tbody>
 </table>

以下是输入框：

<h1>City Database Search: <input ng-model="pic.capital"></h1>
<ul><li ng-show="pic.capital" id="li" ng-repeat="item in pic|filter:pic.capital|orderBy:'capital' track by item.capital"><h1>{{item.capital}}</h1></li></ul>
<h1>Country Database Search: <input ng-model="pic.country"></h1>
<ul><li ng-show="pic.country" ng-repeat="item in pic|filter:pic.country|orderBy:'country' track by item.country">
<h1>{{item.country}}</h1></li></ul>
<h1>Continent Database Search: <input ng-model = "pic.continent"></h1>
<ul><li ng-show="pic.continent" ng-repeat="item in pic|filter:pic.continent|orderBy:'continent' track by item.continent">
<h1>{{item.continent}}</h1></li></ul><br>

JSON文件：

[
{
"capital":"Ottawa",
"country":"Canada",
"continent":"North America",
"image":"https://upload.wikimedia.org/wikipedia/commons/2/22/Parliament-   Ottawa.jpg"
},
{
"capital":"Oslo",
"country":"Norway",
"continent":"Europe",
"image":"https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Downtown_Oslo_Norway_skyline.png/800px-Downtown_Oslo_Norway_skyline.png"
},
{
"capital":"Auckland",
"country":"New Zealand",
"continent":"Oceania",
"image":"https://upload.wikimedia.org/wikipedia/commons/6/6e/Auckland_City_from_Mt_Victoria%2C_Devonport_-_Flickr_-_111_Emergency_%281%29.jpg"
},
{
"capital":"Buenos Aires",
"country":"Argentina",
"continent":"South America",
"image":     "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Buenos_Aires_Panorama.jpg/800px-Buenos_Aires_Panorama.jpg"
},
{
"capital":"Tokyo",
"country":"Japan",
"continent":"Asia",
"image":"https://upload.wikimedia.org/wikipedia/commons/b/bf/Tokyo_Montage_2015.jpg"
}
]

Answer 1

目前，您通过使用$ index查找pic中的项目，从而消除了ng-repeat的有用性。相反，您应该使用item来引用当前迭代的pic项。类似地，用于显示的表通常仅在单个行与单个项相关时才有用，否则，您应该使用不同的块元素来显示您的项（我选择了无序列表）。

如果我正确理解你的问题，看起来你在每第3个项目之后尝试添加一些视觉中断。通过在列表项上使用迭代器，在nth-child中使用after选择器和css3伪类，我们可以创建一个带有一点魔法的视觉中断。

<强> JSFIDDLE

<强> HTML

<ul id="resultsList">
    <li ng-repeat="item in pic|filter:pic.capital|filter:pic.country|filter:pic.continent">
        <img ng-src="{{item.image}}">
        <br>
        <div>{{item.capital}} is the capital of {{item.country}},
            <br> which is located in {{item.continent}}.
        </div>
    </li>
</ul>

<强> CSS

#resultsList{
    margin:0;
    padding:0;
}
#resultsList li{
    width:33.333%;
    float:left;
    display:block;
    height:200px;
    position:relative;
}
#resultsList li:nth-child(3n+0){
    padding-bottom:20px;
}
#resultsList li:nth-child(3n+0):after{
    content:" ";
    position:absolute;
    left:-200%;
    right:0;
    bottom:0;
    height:20px;
    background: red;
}
#resultsList li img{
    width:100%;
    max-height:150px;
    margin:0 auto;
}

ng-if与ng-repeat过滤器冲突？

1 个答案: