在 AngularJS 中，根据奇数或偶数 $index 属性过滤数组的正确方法是什么? [英] In AngularJS, what is the correct way to filter an array based on odd or even $index property?

问题描述

我想根据偶数和奇数 $index 属性过滤数组，我想在单独的 div 中添加奇数元素，在另一个 div 中添加偶数元素，我可以在 JavaScript 或jQuery，但我想知道在 AngularJS 中实现相同的正确方法.

这是我目前所做的:

<div ng-init="names=['John', 'Mary', 'Cate', 'Suz']"><div class="row" ng-repeat="name in names"><div class="col-xs-6" ng-show="(($index + 1)%2) == 0">{{name}}</div><div class="col-xs-6" >{{name}}</div>

它在第一种情况下显示空格代替奇数元素，当我为第二个 div 添加奇数表达式时，第二个 div 中的元素消失并出现在第一个 div 中.这是针对同一问题的 fiddle.

请指教.

我得到了我想要的东西，我将主数组拆分为两个不同的数组奇数和偶数数组；这个 fiddle 可能对将来偶然发现相同问题的人有用.

解决方案

我认为由于 ng-repeat作品.它为重复的每次迭代生成一个新的范围.所以每次循环都会有两个 div，一个可见，一个隐藏.

解释你看到的奇怪行为:

• 在您的第一种情况下，循环在显示两个 div 和显示一个 div 之间交替.在仅显示一个 div 的行中，可以理解为第二列中插入了一个空格.

• 在第二种情况下，ng-repeat 循环在显示第一个 div 和第二个 div 之间交替.没有一些 CSS 样式来显示差异，它看起来像一个 div.您可以通过向其中一个 div 添加诸如 text-info 之类的样式来使其流行.

我希望这能解释幕后发生的事情，但更好的问题是……你想用这两个 div 完成什么?

更新: 由于看起来您的目标是获取该数组并将其抽取为 2 列布局，因此您可以取消行 div 和 2 列 div.相反，尝试重复一个 6 宽的列 div.它将每隔一列为您处理换行.如果您想区分 div，您可以使用 @Blackhole 指出的奇数和偶数样式.我有一个示例小提琴设置 here 可能有用.

I want to filter an array based on even and odd $index property and I want to add odd elements in a separate div and even elements in another div, I could easily do this in JavaScript or jQuery, but I wanted to know the correct way to implement the same in AngularJS.

This is what I've done so far:

<div ng-app> 
    <div ng-init="names=['John', 'Mary', 'Cate', 'Suz']">
        <div class="row" ng-repeat="name in names">
            <div class="col-xs-6" ng-show="(($index + 1)%2) == 0">{{name}}</div>
            <div class="col-xs-6" >{{name}}</div>
        </div>    
    </div>
</div>

It shows empty spaces in place of odd elements in first case, and when I add the odd expression for second div, the elements in the second div disappear and appear in first div. Here is the fiddle for the same issue.

Please advise.

EDIT:

I have got what I wanted, I split the main array into two different arrays odd and even array; this fiddle may be useful for people who stumble upon the same issue in the future.

解决方案

I think you're going to have some trouble with what you're looking to do, due to the way ng-repeat works. It generates a new scope for each iteration of the repeat. So you'll end up with two divs each time through the loop, one visible and one hidden.

To explain the weird behavior you've been seeing:

• In your first case, the loop is alternating between showing two divs and showing one div. In a row that displays only one div, it understandably looks like a blank was inserted in the second column.

• In the second case, the ng-repeat loop alternates between showing the first div and the second one. Without some CSS styling to show the difference, it looks like one div. You can make it pop by adding a style such as text-info to one of the divs.

I hope that explains what's going on behind the scenes, but the better question is... what are you trying to accomplish with the two divs?

Update: Since it looks like your goal is to take that array and pump it out into a 2-column layout, you can probably do away with your row div and your 2 column divs. Instead, try repeating a single 6-width column div. It'll handle the row wrapping for you every other column. You can use odd and even styling as @Blackhole pointed out if you want to differentiate the divs. I've got an example fiddle set up here that may be of use.

这篇关于在 AngularJS 中，根据奇数或偶数 $index 属性过滤数组的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！