我需要你的帮助。 我决定尝试创建某种在线市场,而且我对AngularJS的某些部分不熟悉,这是我第一次遇到ng-repeat这样的问题。 我有以下html结构(它只是它的必需部分):
<div class="goods">
<div class="goods-row" ng-repeat="???">
<div class="good" ng-repeat="???">
<button id="add_to_cart">+</button>
<div class="descr">
<div class="descr-top">
<h5 class="g-name">
NAME IS HERE
</h5>
<span class="g-price">
PRICE IS HERE
</span>
</div>
<div class="descr-mid" ng-bind="good.description"></div>
</div>
</div>
</div>
</div>
&#34;货物&#34;(货物类)包括&#34;货物行和#34;(货物行)。每一行应该包括(默认情况下)4件商品(好的),但是,应该注意到我会使用过滤器,这可能会连续改变可见商品的数量,因此我需要一个灵活的解决方案。 我应该在ng-repeat中输入什么? 附:我用JS代码(在下面发布)创建了一个蓝图,它以某种方式显示了我想要的内容,但是如何在AngularJS中创建呢?
var arr = [];
for (i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) {
arr.push({
number: i
});
}
var divider = 4;
for (var i = 0; i < arr.length;) {
for (var j = 0; j < divider; j++) {
if ((j + i) < arr.length) {
console.log(arr[j + i]);
}
}
i = i + divider;
console.log(" ");
}
答案 0 :(得分:1)
使用lodash库,您可以使用chunk
函数将数组拆分为块,然后构建一个符合您需求的列表。
所以基本上只是迭代正常的数组列表(代表包含商品的行),并实现一个根据分隔符构建此列表的函数。这样,您可以在需要重建列表时调用该函数(在下面的示例中输入的keyup上),然后让AngularJS完成剩下的工作。
(function(angular) {
'use strict';
angular.module('ngRepeat', [])
.controller('repeatController', function($scope) {
// the goods
$scope.goods = [
{ name: "name-1", price: 1.01, description: 'desc-1' },
{ name: "name-2", price: 2.02, description: 'desc-2' },
{ name: "name-3", price: 3.03, description: 'desc-3' },
{ name: "name-4", price: 4.04, description: 'desc-4' },
{ name: "name-5", price: 5.05, description: 'desc-5' },
{ name: "name-6", price: 6.06, description: 'desc-6' },
{ name: "name-7", price: 7.07, description: 'desc-7' },
{ name: "name-8", price: 8.08, description: 'desc-8' },
{ name: "name-9", price: 9.09, description: 'desc-9' },
{ name: "name-10", price: 10.10, description: 'desc-10' },
{ name: "name-11", price: 11.11, description: 'desc-11' },
{ name: "name-12", price: 12.12, description: 'desc-12' }
];
// divider determines how many goods per row (defaulted to 4)
$scope.divider = 4;
// function that build the rows of goods
$scope.dividerChanged = function() {
$scope.rows = _.chunk($scope.goods, $scope.divider);
};
// initialize rows on first load
$scope.dividerChanged();
});
})(window.angular);
&#13;
.divider {
margin-bottom: 10px;
}
.goods-row {
border: 1px solid blue;
padding: 10px;
text-align: center;
}
.good {
border: 1px solid red;
display: inline-block;
padding: 10px;
margin: 10px;
width: 50px;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app="ngRepeat">
<div ng-controller="repeatController">
divider: <input type="text" ng-model="divider" ng-keyup="dividerChanged()" class="divider">
<div class="goods">
<div class="goods-row" ng-repeat="row in rows">
<div class="good" ng-repeat="good in row">
<button id="add_to_cart">+</button>
<div class="descr">
<div class="descr-top">
<h5 class="g-name">{{ good.name }}</h5>
<span class="g-price">{{ good.price | currency }}</span>
</div>
<div class="descr-mid">{{ good.description }}</div>
</div>
</div>
</div>
</div>
</div>
</body>
&#13;
答案 1 :(得分:0)
我无法完全理解您的问题,您是否尝试构建已过滤的数组,但始终要显示前4个条目?
如果是,则可以使用ng-repeat
过滤器(自定义与否)和limitTo
过滤器
<div ng-repeat="data in test.data | customFilter:test.selectedFilter | limitTo:4">{{data}}</div>