在每 2 个 <li> 之后添加 <ul></ul>,并带有角度 ngRepeat

Adding <ul></ul> after every 2nd <li> with angular ngRepeat

本文关键字:ul ngRepeat 添加 li 之后 在每      更新时间:2023-09-26

我有一个ul,我在li上应用ngRepeart,但我希望在每次第二个li之后,它都会像这样创建新的ul
这可能吗?

<ul>
  <li>simth</li>
  <li>aryan</li>
</ul>
<ul>
  <li>john</li>
  <li>mark</li>
</ul>
<ul>
  <li>cooper</li>
  <li>lee</li>
</ul>

这是我的角度.js代码

function myCrtl($scope){
  $scope.nameList= [{
      name:'simth'
    },{
      name:'aryan'
    },{
      name:'john'
    },{
      name:'mark'
    },{
      name:'cooper'
    },{
      name:'lee'
    }]
}

AngularJS中的编程接近于"数据驱动开发"。您的数据不能反映您想要获得的HTML结构,因此很难实现,但并非不可能。我的第一个建议解决方案是更改数据的结构。如果这不是一个选项,请继续阅读。

const myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', $scope => {
    $scope.nameList = [
        [{name: 'simth'}, {name: 'aryan'}],
        [{name: 'john'}, {name: 'mark'}],
        [{name: 'cooper'}, {name: 'lee'}]
    ];
    
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <ul ng-repeat="group in nameList">
        <li ng-repeat="person in group">{{person.name}}</li>
    </ul>
</div>
</div>

另类

如果您无法更改数据结构,您仍然可以执行此操作。实现一个小的帮助程序函数或过滤器:

const myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', $scope => {
    $scope.nameList = [
        {name: 'simth'},
        {name: 'aryan'},
        {name: 'john'},
        {name: 'mark'},
        {name: 'cooper'},
        {name: 'lee'}
    ];
});
myApp.filter('getGroup', () => (array, number) => {
    return array.reduce((prev, next, index) => {
        if (index % number === 0) {  // start a new group
            prev.push([next]);
        } else {
            prev[prev.length - 1].push(next);  // add to existing group
        }
        return prev;
    }, []);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
    <ul ng-repeat="group in nameList | getGroup:2">
        <li ng-repeat="person in group">{{person.name}}</li>
    </ul>
</div>
</div>

过滤器的作用是:获取数组并将其分成许多数组,每个数组有 2 个元素(这是一个参数,因此您可以稍后重用它)。

最好像其他人所说的那样重新排列数据,尽管如果您真的想要,您可以执行以下操作:

<ul ng-if="$even" ng-repeat="person in nameList">
    <li>{{ person.name }}</li>
    <li>{{ nameList[$index + 1].name }}</li>
</ul>

ng-if将停止呈现列表中的每隔一个项目。

虽然我同意 Miszy,但您可以通过以下代码片段实现它:

<div ng-repeat="item in nameList">
                <ul ng-if="$index%2 == 0">
                    <li ng-repeat="item in nameList.slice($index, $index+2)">
                        {{ item.name }}
                    </li>
                </ul>
            </div>

您可以将数组拆分为块。请看下面的演示

var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
  $scope.nameList = [{
    name: 'simth'
  }, {
    name: 'aryan'
  }, {
    name: 'john'
  }, {
    name: 'mark'
  }, {
    name: 'cooper'
  }, {
    name: 'lee'
  }]
  Array.prototype.chunk = function(chunkSize) {
    var array = this;
    return [].concat.apply([],
      array.map(function(elem, i) {
        return i % chunkSize ? [] : [array.slice(i, i + chunkSize)];
      })
    );
  }
  $scope.temparray = $scope.nameList.chunk(2)
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl">
    <ul ng-repeat="gr in temparray">
      <li ng-repeat="person in gr">{{person.name}}</li>
    </ul>
  </div>
</div>

好吧,你可以像这样保存列表:

function myCrtl($scope){
  $scope.nameList= [{
      name1:'simth'
      name2:'aryan'
    },{
      name1:'john'
      name2:'mark'
    },{
      name1:'cooper'
      name2:'lee'
    }]
}

然后你可以很容易地做ng重复

<div ng-repeat-start="item in nameList">
  <ul>
    <li>item.name1</li>
    <li>item.name2</li>
  </ul>
</div>

您可以修改输入列表并更改格式,如其他人所述。我建议您检查jsfiddle中提出的通用方法。

我编写了一个函数,可以将您的输入列表转换为所需的格式:

$scope.getSegment = function(noOfRecord){
    noOfRecord = noOfRecord;
    var processedList = [];
    var tempList = [];
    for(var i = 0; i <  $scope.nameList.length; i++){
        tempList.push($scope.nameList[i]);
        if((i+1)%noOfRecord == 0){
            processedList.push(tempList);
            tempList = [];
        }
    }
    return processedList;
};

并像这样迭代它:

<ul ng-repeat="group in getSegment(2)">
    <li ng-repeat="detail in group">{{detail.name}}</li>
</ul>