添加if else条件以关闭并打开ng-repeat中的HTML元素 - AngularJs

作者: 威斯特
发布时间: 2024-01-20 08:27:27 (6月前)
转自：

3 条回复

0#
回复此人
polo | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我认为将ng-repeat转换为ul以使ng-repeat处理呈现为四个一组而不是手动尝试使用打开和关闭html标记会更容易。您可以尝试以下内容来实现这一目标。 </p> <P> JS </p> <pre> <code> $scope.getNumber = function(data,numberOfItems) { if(data.length % numberOfItems === 0) return new Array(data.length / numberOfItems); else return new Array(Math.floor(data.length/numberOfItems) + 1); } $scope.getData = function(data,index,numberOfItems){ var temp = data; return temp.slice(index * numberOfItems,index * numberOfItems + numberOfItems); } </code> </pre> <P> HTML </p> <pre> <code> <div class="dd clear"> <ul ng-repeat="item in getNumber(data,4) track by $index"> <li data-ng-repeat="name in getData(data,$index,4)"> {{name}} </li> </ul> </div> </code> </pre> <P> 的<strong> <a href="https://plnkr.co/edit/afUBQAqdmWk82GOPgxqk?p=preview" rel="nofollow noreferrer"> 演示 </A> </强> </p> </DIV>

编辑
1#
回复此人
Colin | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用$ index和“模数运算符”来标识每四个值。我已经创建了一个测试演示 <code> jsfiddle.net </code> 您可以通过以下链接查看。 </p> <BLOCKQUOTE> <P> <a href="http://jsfiddle.net/mq2ngfs7/" rel="nofollow noreferrer"> http://jsfiddle.net/mq2ngfs7/ </A> </p> </BLOCKQUOTE> </DIV>

编辑

登录后才能参与评论