Question

plunker preview
我有主数组有关于用户的信息。
每个项目（用户）都有＆＃39;数据＆＃39;阵列：

{
  name: 'Linda',
  data: [
    {
      value: 3
    },
    {
      value: 6
    }
  ]
}

我需要像这样打印主数组：

Linda - 3
Linda - 6

更新：我可以在输入中更改名称。见版本2.

所以我使用ng-repeat和返回新对象的函数。我知道错误： [$ rootScope：infdig]

为避免此错误，我使用google groups方法：＆＃39;更改＆＃39;过滤器＆＃39;链接器＆＃39;工厂。
（我想使用$$ hashKey方法。但我不明白该怎么做）

要解决此错误，请打开我的代码并删除“更改”＃39;以HTML格式过滤。

问题：也许您知道更简单的打印阵列解决方案吗？谢谢。
如果我打印前要排序？

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.users = [
    {
      name: 'Linda',
      data: [
        {
          value: 3
        },
        {
          value: 6
        }
      ]
    },
    {
      name: 'John',
      data: [
        {
          value: 2
        },
        {
          value: 11
        }
      ]
    }
  ];

  $scope.getUsersData = function(){
    var output = [];
    $scope.users.forEach(function(user){
      if ('data' in user) {
        user.data.forEach(function(userData){
          output.push({name: user.name, value: userData.value});
        });
      }
    });
    return output;
  };
});

// From https://groups.google.com/d/msg/angular/IEIQok-YkpU/iDw32-YRr3QJ
app.filter('change', function(linker) {
   return function(items) {
      var collection = items.map(function (item) {
        return item;
      });

      return linker(collection, 'some-key');
    };
});

app.factory('linker', function () {
  var links = {};
  return function (arr, key) {
    var link = links[key] || [];

    arr.forEach(function (newItem, index) {
      var oldItem = link[index];
      if (!angular.equals(oldItem, newItem))
        link[index] = newItem;
    });

    link.length = arr.length;

    return links[key] = link;
  }
})

＆＃13;

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <body ng-app="plunker" ng-controller="MainCtrl as main">
    <ul>
      <li ng-repeat="user in users = getUsersData() | change track by $index">{{user.name}} - {{user.value}}</li>
    </ul>
    <hr>
    <div ng-repeat="user in users">
     <input ng-model="user.name"/>
    </div>
    </body>

＆＃13;

Answer 1

如果您使用$$hashKey，Angular不会向您的数组中的对象添加track by属性。 $$hashKey是由angular添加的默认属性，用于跟踪给定数组中的更改。使用不ng-repeat的{{1}}来使用 hashKey

Answer 2

尝试这样的事情。没有过滤器或嵌套的ng-repeat

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
</head>

<body ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="user in userFetchedData track by $index">{{user.name}} - {{user.value}}</li>
  </ul>
</body>

</html>

＆＃13;

doc-view-mode

＆＃13;

Answer 3

plunker version 3
我需要在输入字段中更改用户名。所以我觉得简单快捷的解决方案就是使用$ watch

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.users = [
    {
      name: 'Linda',
      data: [
        {
          value: 3
        },
        {
          value: 6
        }
      ]
    },
    {
      name: 'John',
      data: [
        {
          value: 2
        },
        {
          value: 11
        }
      ]
    }
  ];
  
  $scope.$watch(function(){
    return JSON.stringify($scope.users);
  }, function(){
    $scope.usersData = $scope.prepareUsersForPrint($scope.users);
  })

  $scope.prepareUsersForPrint = function(arr){
    var output = [];
    arr.forEach(function(user){
      if ('data' in user) {
        user.data.forEach(function(userData){
          output.push({name: user.name, value: userData.value});
        });
      }
    });
    return output;
  };
});

＆＃13;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <body ng-app="plunker" ng-controller="MainCtrl as main">
    <ul>
      <li ng-repeat="user in usersData track by $index">{{user.name}} - {{user.value}}</li>
    </ul>
    <hr>
    <div ng-repeat="user in users">
      <input ng-model="user.name"/>
    </div>
    </body>

＆＃13;

ng-repeat with function创建新对象并避免[$ rootScope：infdig]

3 个答案: