在每 2 个 <li> 之后添加 <ul></ul>,并带有角度 ngRepeat
Adding <ul></ul> after every 2nd <li> with angular ngRepeat
我有一个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>
相关文章:
- 在单独的ul's
- 如何使用ngrepeat和双向绑定获得指令的隔离范围
- 如何将ngrepeat下的ngmodel绑定到$scope
- 将所选类别循环到ul>李用加载更多按钮
- 使用jquery动态创建ul-li
- Angular ngRepeat:重复错误(尽管没有重复的密钥)
- 使用下拉列表筛选列表(ul>li)
- 如何附加<ul><李>元素位于某个特定条件的父元素列表之间
- :not选择器不适用于ul类-备选方案
- 在验证器中添加自定义规则以检查<ul>具有元素
- 在JQuery中隐藏和显示ul中的特定元素
- 如何按对象反转Angular ngRepeat的顺序's键,这些键是数字键
- 使用 jquery 获取外部父 UL
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- 如何在点击时显示ul项目
- 限制ul元素中显示的项目
- ul-li专属功能
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- 自动完成jquery;t使用ngmodel和ngrepeat(angular)
- 我应该如何在 UL 内触发 IMG 标签的点击