Question

我有一个 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>

，这是我的angular.js代码

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

Answer 1

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

＆＃13;

const myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', $scope => {
    $scope.nameList = [
        [{name: 'simth'}, {name: 'aryan'}],
        [{name: 'john'}, {name: 'mark'}],
        [{name: 'cooper'}, {name: 'lee'}]
    ];
    
});

＆＃13;

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

＆＃13;

替代

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

＆＃13;

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;
    }, []);
});

＆＃13;

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

＆＃13;

过滤器的作用是：取出数组并将其划分为多个数组，每个数组包含2个元素（这是一个参数，以便稍后重用）。

Answer 2

最好像其他人所说的那样重新安排你的数据，尽管如果你真的想要你可以做这样的事情：

<ul ng-if="$even" ng-repeat="person in nameList">

    <li>{{ person.name }}</li>
    <li>{{ nameList[$index + 1].name }}</li>

</ul>

ng-if将停止呈现列表中的每个第二项。

Answer 3

虽然我同意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>

Answer 4

好吧，您可以像这样保持列表：

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

然后你可以轻松地进行ng-repeat

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

Answer 5

您可以将阵列拆分为块。请参阅下面的演示

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>

Answer 6

您可以修改输入列表并按其他人的描述更改格式。我建议你检查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>

在第二个<li>之后使用角度ngRepeat </li>添加<ul> </ul>

6 个答案:

替代