我收到来自后端服务器的数据,结构如下:
{
name : "Mc Feast",
owner : "Mc Donalds"
},
{
name : "Royale with cheese",
owner : "Mc Donalds"
},
{
name : "Whopper",
owner : "Burger King"
}
Run Code Online (Sandbox Code Playgroud)
对于我的观点,我想"反转"清单.即我想列出每个所有者,并为该所有者列出所有汉堡包.我可以通过groupBy
在过滤器中使用underscorejs函数来实现这一点,然后我将其与ng-repeat
指令一起使用:
JS:
app.filter("ownerGrouping", function() {
return function(collection) {
return _.groupBy(collection, function(item) {
return item.owner;
});
}
});
Run Code Online (Sandbox Code Playgroud)
HTML:
<li ng-repeat="(owner, hamburgerList) in hamburgers | ownerGrouping">
{{owner}}:
<ul>
<li ng-repeat="burger in hamburgerList | orderBy : 'name'">{{burger.name}}</li>
</ul>
</li>
Run Code Online (Sandbox Code Playgroud)
这可以按预期工作,但是当使用错误消息"10 $ digest iterations到达"呈现列表时,我得到了一个巨大的错误堆栈跟踪.我很难看到我的代码如何创建一个由此消息隐含的无限循环.有人知道为什么吗?
这是一个带有代码的插件的链接:http://plnkr.co/edit/8kbVuWhOMlMojp0E5Qbs?p …
我是Angular的新手,想学习处理问题的最佳方法.我的目标是有一个可重用的方法来创建按标题分组.我创建了一个可行的解决方案,但我认为这应该是一个指令,而不是我的控制器中的范围函数,但我不知道如何实现这一点,或者指令是否是正确的方法.任何投入将不胜感激.
看看我目前处理jsFiddle的方法
在HTML中,它是一个使用ng-repeat的简单列表,我在ng-show上调用newGrouping()函数.该函数传递对完整列表的引用,我想要分组的字段和当前索引.
<div ng-app>
<div ng-controller='TestGroupingCtlr'>
<div ng-repeat='item in MyList'>
<div ng-show="newGrouping($parent.MyList, 'GroupByFieldName', $index);">
<h2>{{item.GroupByFieldName}}</h2>
</div>
{{item.whatever}}
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
在我的控制器中,我有newGrouping()函数,它只是将当前值与之前的值进行比较,第一项除外,并根据匹配返回true或false.
function TestGroupingCtlr($scope) {
$scope.MyList = [
{GroupByFieldName:'Group 1', whatever:'abc'},
{GroupByFieldName:'Group 1', whatever:'def'},
{GroupByFieldName:'Group 2', whatever:'ghi'},
{GroupByFieldName:'Group 2', whatever:'jkl'},
{GroupByFieldName:'Group 2', whatever:'mno'}
];
$scope.newGrouping = function(group_list, group_by, index) {
if (index > 0) {
prev = index - 1;
if (group_list[prev][group_by] !== group_list[index][group_by]) {
return true;
} else {
return false;
}
} else {
return true;
} …
Run Code Online (Sandbox Code Playgroud) group-by angularjs angularjs-directive angularjs-ng-repeat ng-show
在ng-repeat中遵循angular.js条件标记,我尝试创建一个进行分组的自定义过滤器.我遇到了有关对象标识和正在观察更改的模型的问题,但我认为我最终将其钉住,因为控制台中不再出现错误.
事实证明我错了,因为现在当我尝试将它与其他过滤器(用于分页)结合起来时就像这样
<div ng-repeat="r in blueprints | orderBy:sortPty | startFrom:currentPage*pageSize | limitTo:pageSize | group:3">
<div ng-repeat="b in r">
Run Code Online (Sandbox Code Playgroud)
我得到了可怕的"10 $ digest()迭代次数.堕胎!" 再次出错信息.
这是我的群组过滤器:
filter('group', function() {
return function(input, size) {
if (input.grouped === true) {
return input;
}
var result=[];
var temp = [];
for (var i = 0 ; i < input.length ; i++) {
temp.push(input[i]);
if (i % size === 2) {
result.push(temp);
temp = [];
}
}
if (temp.length > 0) {
result.push(temp);
} …
Run Code Online (Sandbox Code Playgroud) 我正在使用Angular-Filter的groupBy过滤器.
GitHub的例子:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
<ul>
<li ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<ul>
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
因此,该示例按团队分组球员集合.想象一下,每个玩家对象都有一个年龄属性:
$scope.players = [
{name: 'Gene', team: 'alpha', age: 19},
{name: 'George', team: 'beta', age: 19},
{name: 'Steve', …
Run Code Online (Sandbox Code Playgroud) 我想在ng-repeat内执行一组功能
鉴于以下数据:
var items = [];
items.push({ id: 1, widgetId: 54, colorId: 45 });
items.push({ id: 2, widgetId: 54, colorId: 72 });
items.push({ id: 3, widgetId: 54, colorId: 29 });
items.push({ id: 4, widgetId: 55, colorId: 67 });
items.push({ id: 5, widgetId: 55, colorId: 29 });
items.push({ id: 6, widgetId: 56, colorId: 29 });
items.push({ id: 7, widgetId: 56, colorId: 72 });
items.push({ id: 8, widgetId: 57, colorId: 75 });
Run Code Online (Sandbox Code Playgroud)
我想要一个ng-repeat导致以下演示
widgetId 54 colorId: 45 colorId: 72 colorId 29
widgetId …
Run Code Online (Sandbox Code Playgroud) 我正在尝试groupBy
一个日期,这是一个JS日期对象.我想每天对数据进行分组.
我有什么想法可以在视图中做到这一点?
$scope.data = {
messages: [
{
date: new Date(1432811030 * 1000),
message: 'Some text 01'
},
{
date: new Date(1432731600 * 1000),
message: 'Some text 02'
},
{
date: new Date(1432819703 * 1000),
message: 'Some text 03'
}
]
};
Run Code Online (Sandbox Code Playgroud)
在我看来,我使用:
<div ng-repeat="(key, value) in data.messages | groupBy: 'date'">
<div>{{ key }}</div>
<div ng-repeat="message in value">
<div>{{ message.message }}</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我将此angular.filter
模块包含在mu项目中:https://github.com/a8m/angular-filter
问题是我现在按日期/时间而不是每天进行分组.知道怎么样?
我有一个像角这样的对象数组:
$scope.data = [
{name:"John", group:"a"},
{name:"David", group:"a"},
{name:"Tom", group:"b"},
];
Run Code Online (Sandbox Code Playgroud)
我想以这样的方式呈现这些数据(在模板中):
<h2>group a</h2>
John<br/>
David<br/>
<h2>groub b</h2>
Tom<br>
Run Code Online (Sandbox Code Playgroud)
你会怎么建议这样做?我怎样才能从最初的结构到最后的结构?
基于如下所示的数组:
var members = [
{name: "john", team: 1},
{name: "kevin", team: 1},
{name: "rob", team: 2},
{name: "matt", team: 2},
{name: "clint", team: 3},
{name: "will", team: 3}
];
Run Code Online (Sandbox Code Playgroud)
我需要为每个团队创建一个无序列表.
可以直接用ngRepeat和过滤器完成吗?
或者更容易将数组重新组织成一个包含成员列表的团队数组?
var teams = [
{id: 1, members: ["john", "kevin"]},
{id: 2, members: ["rob", "matt"]},
{id: 3, members: ["clint", "will"]}
]
Run Code Online (Sandbox Code Playgroud)
嵌套的ngRepeat很容易实现,但是如何以简单/聪明的方式从第一个数组转到这个数组呢?
注意:该数组不是来自数据库,而是来自html表.所以它只是一个简单的成员列表.
function MyController() {
this.members = [
{name: "john", team: 1},
{name: "kevin", team: 1},
{name: "rob", team: 2},
{name: "matt", team: 2},
{name: "clint", team: …
Run Code Online (Sandbox Code Playgroud)