plunker preview
私はユーザに関する情報を持つメインアレイを持っています。
各項目(ユーザ)は、 'データ' の配列を有する:新しいオブジェクトを作成して回避する機能を持つng-repeat
{
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>
だと思います。 – MMK