相关疑难解决方法(0)

角度过滤器有效,但会导致"10 $ digest迭代达到"

我收到来自后端服务器的数据,结构如下:

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

underscore.js angularjs

38
推荐指数
2
解决办法
2万
查看次数

AngularJS Group by Directive without External Dependencies

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

27
推荐指数
2
解决办法
5万
查看次数

角度分组滤波器

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

angularjs

12
推荐指数
1
解决办法
2万
查看次数

我可以使用Angular-Filter按多个字段进行分组吗?

我正在使用Angular-FiltergroupBy过滤器.

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)

group-by angularjs angular-filters

9
推荐指数
1
解决办法
1万
查看次数

使用AngularJs ng-repeat分组项目详细信息

我想在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)

javascript angularjs angularjs-ng-repeat

7
推荐指数
1
解决办法
1万
查看次数

ng-repeat group每日日期字段

我正在尝试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

问题是我现在按日期/时间而不是每天进行分组.知道怎么样?

angularjs angularjs-ng-repeat angular-filters

2
推荐指数
1
解决办法
2万
查看次数

在angularjs/javascript中操作数据

我有一个像角这样的对象数组:

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

你会怎么建议这样做?我怎样才能从最初的结构到最后的结构?

javascript arrays grouping angularjs angularjs-ng-repeat

2
推荐指数
1
解决办法
40
查看次数

在AngularJS中对对象数组进行分组

基于如下所示的数组:

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)

javascript arrays function angularjs

2
推荐指数
2
解决办法
2万
查看次数