ng-repeat с функцией создания новых объектов и избежать [$ rootScope: infdig]

plunker preview
У меня есть основной массив с информацией о пользователях.
Каждый элемент (пользователь) имеет массив 'данные':

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

Мне нужно напечатать основной массив так:

Linda - 3
Линда - 6

ОБНОВЛЕНО: И я могу изменить имена в входах. См. Версию 2.

Поэтому я использую ng-repeat с функцией, которая возвращает новый объект. И я получаю известную ошибку: [$ rootScope: infdig]

Чтобы избежать этой ошибки я использую google groups подход: «изменить» фильтр и «линкер» завод.
(Я хотел использовать метод $$ hashKey, но я не понимал, как это сделать)

Чтобы получить эту ошибку, откройте мой код и удалите фильтр «изменить» в HTML.

Вопрос: возможно, вы знаете, как проще решить печатный массив? Благодарю.
И если я буду сортировать до печати?

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; 
 
    } 
 
})

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

источник

2017-01-30 user5367575

вы не можете использовать функцию в ngRepeat, как это. – MMK

plunker version 3
мне нужно изменить имя пользователя внутри поля ввода. Так что я думаю, что легко и быстрое решение для меня является использование $ часы

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; 
 
    }; 
 
});

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

источник

2017-01-30 17:45:48 user5367575

Угловая не добавляет $$hashKey собственности на объекты в массиве, если вы используете track by. $$hashKey - свойство по умолчанию, добавленное угловым, чтобы отслеживать изменения в заданном массиве. Использование ng-repeat без track by использовать hashKey

источник

2017-01-30 16:33:48

Попробуйте что-то вроде этого. без фильтра или вложенных нг-повторить

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    var users = [{ 
 
    name: 'Linda', 
 
    data: [{ 
 
     value: 3 
 
    }, { 
 
     value: 6 
 
    }] 
 
    }, { 
 
    name: 'John', 
 
    data: [{ 
 
     value: 2 
 
    }, { 
 
     value: 11 
 
    }] 
 
    }]; 
 

 
    $scope.getUsersData = function() { 
 
    var output = []; 
 
    users.forEach(function(user, ind) { 
 
     if ('data' in user) { 
 
     user.data.forEach(function(userData, ind) { 
 
      output.push({ 
 
      name: user.name, 
 
      value: userData.value 
 
      }); 
 
     }); 
 
     } 
 
    }); 
 
    return output; 
 
    }; 
 
    $scope.userFetchedData = $scope.getUsersData(); // here is the magic 
 

 
}); 
 

 

 

 

 
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; 
 
    } 
 
})

<!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="[email protected]" 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>

источник

2017-01-30 16:51:40 MMK

ng-repeat с функцией создания новых объектов и избежать [$ rootScope: infdig]

ответ

Смежные вопросы