Я хочу сделать ng-repeat, который показывает каждый элемент для моего n.name, поэтому, если имя повторяется (как в моем коде - есть три "asd"), позвольте показать для него в colspan = "100%" все веса.
Это мой код
<p ng-repeat = "n in messages">
{{n.name}}
{{n.weight}}
</p>
<table class = "table">
<thead>
<tr>
<th>name</th>
<th>weight</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start = "n in messages ">
<td>{{n.name}}</td>
<td> <button type = "button" class = "btn btn-default" ng-if = "n.expanded" ng-click = "expand(n);">-</button></button>
<button type = "button" class = "btn btn-default" ng-if = "!n.expanded" ng-click = "expand(n);">+</button>
</td>
</tr>
<tr ng-if = "n.expanded" ng-repeat-end = "">
<td colspan = "100%" class = "text">
{{n.weight}}
</td>
</tr>
</tbody>
</table>
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.messages = [
{
'name' : 'asd',
'weight' : '19'
},
{
'name' : 'asd',
'weight' : '21'
},
{
'name' : 'asd',
'weight' : '26'
},
{
'name' : 'dsa',
'weight' : '17'
}
];
$scope.expand = function(select) {
var boolexpansion = !select.expanded;
angular.forEach($scope.messages, function(n) {
n.expanded = false;
});
if (boolexpansion) {
select.expanded = !select.expanded;
}
}
});



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Возможно, проще реорганизовать ваши данные.
$scope.messages = [
{
name: 'asd',
weights: ['19', '20', '21']
},
{
name: 'dsa',
weights: ['17']
}
];
Теперь вы можете просто сделать второй нг-повтор с отягощениями. Функцию реорганизации данных не должно быть так сложно написать. Что-то вроде:
var foo = [
{
'name' : 'asd',
'weight' : '19'
},
{
'name' : 'asd',
'weight' : '21'
},
{
'name' : 'asd',
'weight' : '26'
},
{
'name' : 'dsa',
'weight' : '17'
}
];
var tempData = {};
foo.forEach(function(bar) {
if (!tempData[bar.name]) {
tempData[bar.name] = [bar.weight];
} else {
tempData[bar.name].push(bar.weight);
}
});
foo = [];
for(i in tempData) {
if (tempData.hasOwnProperty(i)) {
foo.push({name: i, weights: tempData[i]})
}
}
console.info(foo);@ bafix2203 Конечно, вы можете реорганизовать свои данные! Вы можете написать код javascript?
@ bafix2203 См. фрагмент кода в моем ответе для примера того, как вы можете реорганизовать свои данные.
Как насчет того, чтобы просто перегруппировать данные в контроллере перед их рендерингом?
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.messages = [
{
'name' : 'asd',
'weight' : '19'
},
{
'name' : 'asd',
'weight' : '21'
},
{
'name' : 'asd',
'weight' : '26'
},
{
'name' : 'dsa',
'weight' : '17'
}
];
$scope.expand = function(select) {
var boolexpansion = !select.expanded;
angular.forEach($scope.messages, function(n) {
n.expanded = false;
});
select.expanded = !select.expanded;
}
$scope.regroup = function(){
var values = $scope.messages.reduce(function (obj, item) {
obj[item.name] = obj[item.name] || [];
obj[item.name].push(item.weight);
return obj;
}, {});
$scope.groupedMessages = Object.keys(values).map(function (key) {
return {name: key, weight: values[key]};
});
};
$scope.regroup();
});<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "plunker" ng-controller = "MainCtrl">
<p ng-repeat = "n in messages">
{{n.name}}
{{n.weight}}
</p>
<table class = "table">
<thead>
<tr>
<th>name</th>
<th>weight</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start = "n in groupedMessages ">
<td>{{n.name}}</td>
<td> <button type = "button" class = "btn btn-default" ng-if = "n.expanded" ng-click = "expand(n);">-</button></button>
<button type = "button" class = "btn btn-default" ng-if = "!n.expanded" ng-click = "expand(n);">+</button>
</td>
</tr>
<tr ng-if = "n.expanded" ng-repeat-end = "">
<td colspan = "100%" class = "text">
{{n.weight}}
</td>
</tr>
</tbody>
</table>
</div>
Я не могу, потому что получаю данные с сервера