ng-repeat帶函數來創建新的對象並避免[$ rootScope：infdig]

plunker preview
我有主要數組與關於用戶的信息。
每個項目（用戶）具有 '數據' 數組：

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

我需要打印的主陣列是這樣的：

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

角，如果你使用track by不陣列中添加$$hashKey屬性的對象。 $$hashKey是角度添加的默認屬性，用於在給定的數組中跟蹤您的更改。使用ng-repeat沒有track by利用hashKey的

來源

2017-01-30 16:33:48

嘗試這樣的事情。不帶過濾器或嵌套NG-重複

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]

回答

相關問題