Ng-repeat показать элементы для элемента

Я хочу сделать 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;
                    }
                }
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
61
2

Ответы 2

Возможно, проще реорганизовать ваши данные.

$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 18.04.2018 10:11

@ bafix2203 Конечно, вы можете реорганизовать свои данные! Вы можете написать код javascript?

Jonathan 18.04.2018 10:13

@ bafix2203 См. фрагмент кода в моем ответе для примера того, как вы можете реорганизовать свои данные.

Jonathan 18.04.2018 10:24

Как насчет того, чтобы просто перегруппировать данные в контроллере перед их рендерингом?

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>

Другие вопросы по теме