当列数为 4 时,我如何务实地让 ng-repeat 添加另一行
How can I pragmatically let ng-repeat add another row when the number of columns are 4?
嗨,我需要有人帮助我,ng-repeat正在从json文件中获取数据,它显示在引导行类的div中,该类内部有col-sm-3,我需要让ng-repeat在一行内有每个4个"col-sm-3",而不是仅在行内呈现所有8个col-sm-3, 因为这会导致设计错误
var angular;
angular.module("rootCave", ['ngRoute'])
.service('aboutService', function ($http, $q) {
"use strict";
var deferred = $q.defer();
$http.get('data/data.json').then(function (rcdata) {
deferred.resolve(rcdata);
});
this.getAbout = function () {
return deferred.promise;
};
})
.controller('aboutCtrl', function ($scope, aboutService) {
var promise = aboutService.getAbout();
promise.then(function (rcdata) {
$scope.about = rcdata.data.about;
$scope.products = rcdata.data.products;
$scope.mobileProduct = rcdata.data.mobileProduct;
$scope.clients = rcdata.data.clients;
$scope.anytime = rcdata.data.anytime;
$scope.lobProduct = rcdata.data.lobProduct;
$scope.Product = rcdata.data.lobProduct.projectsdetails;
});
})
.config(function ($routeProvider) {
$routeProvider
.when('/lob',
{
controller: 'loburl',
templateUrl: 'line-of-business.php'
});
});
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row">
<div class="col-sm-3 " data-ng-repeat="items in about">
<div class="about-box">
<img ng-src= "<?php echo $img_about; ?>{{items.icon}}">
<h3>{{items.title}}</h3>
<p>{{items.description}}</p>
</div>
</div>
</div>
你可以试试可能会对你有所帮助
<div class="row" ng-repeat="items in about track by $index" ng-if="$index % 4 == 0">
<div class="col-sm-3"
ng-repeat="i in [$index, $index + 1, $index + 2, $index + 3]"
ng-if="about[i]"
>
<div class="about-box">
<img ng-src= "<?php echo $img_about; ?>{{about[i].icon}}">
<h3>{{about[i].title}}</h3>
<p>{{about[i].description}}</p>
</div>
</div>
</div>
看看这个 plunk: https://plnkr.co/edit/r5tXZAWFxTEAKHjqyRvY?p=preview
您可以嵌套两个 ng 重复,外部迭代行,内部显示元素:
<div ng-repeat="i in getRows(rowCount) track by $index" class="row">
<b>Row {{$index}}</b>
<div class="col-sm-3" ng-repeat="item in getRowItems($index)">
{{item}}
</div>
</div>
在控制器中:
$scope.items = ['a','b','c','d','e','f','g','h','i'];
//determine the number of rows
$scope.rowCount = Math.ceil($scope.items.length/4);
$scope.getRows = function(rows) {
return new Array(rows);
}
//the following function gives four items for one row index
$scope.getRowItems = function(row) {
return $scope.items.slice(row*4, (row+1)*4);
}
它类似于分页。getRows 函数的灵感来自以下:ng-重复定义的次数而不是在数组上重复的方法?
也许地图不像我希望的那样工作。但是,呈现逻辑建议你有一个列表列表。
function group(array, size) {
var length = array.length;
var result = Array(Math.ceil(length, size));
var index = 0, resIndex = 0;
while(index < length){
result[resIndex++] = array.slice(index, (index += size));
}
return result;
}
使用控制器中的帮助程序功能
.controller('aboutCtrl', function ($scope, aboutService) {
var promise = aboutService.getAbout();
promise.then(function (rcdata) {
$scope.about = group(rcdata.data.about, 4);
});
});
然后渲染逻辑变为:
<div class="row" ng-repeat="rows in about">
<div class="col-sm-3 " ng-repeat="column in rows">
<div class="about-box">
</div>
</div>
</div>
相关文章:
- AngularJS:为ng-repeat中的图像添加切换功能
- Ng-Repeat在末尾添加新项目
- 将jquery函数添加到Angular ng repeat中
- 如何使用ng repeat在匹配的元素上添加活动类
- 使用ng repeat添加多个视图实例时的范围界定问题
- 如何在AngularJS中将css类添加到transcluded ng repeat内容中
- 使用括号表示法添加到关联数组时,ng-repeat 不会更新
- 当列数为 4 时,我如何务实地让 ng-repeat 添加另一行
- AngularJs:我想从数组或列表中添加一个类,用于ng-repeat中的每次迭代
- 在 ng-repeat 中添加和删除 JSON 列表
- 添加重复键对象时如何更新 ng-repeat 列表中的元素
- Angular JS - 将ng-repeat异步应用于添加到DOM的内容
- 当项目包含在数组中时,在 ng-repeat 上以角度添加类
- 如何为由 ng-repeat 迭代的每个名称和值添加单独的宽度
- 向 Angular ng-repeat(角度)添加一个计数器
- 在页面加载时,根据 json 对象的值向 Angularjs ng-repeat 中的元素添加一个类
- AngularJS试图将一个类添加到多个值,如果它在ng-repeat上为真
- AngularJS在ng repeat中的新项上添加CSS类
- 如何在ng repeat中添加Class
- 如何在angularjs中添加ng-repeat中的值