Блог

Главная - Вопросы по программированию - Как обрабатывать несколько ng-повторов в одной таблице и правильно отображать данные

Как обрабатывать несколько ng-повторов в одной таблице и правильно отображать данные

#javascript #html #angularjs

#javascript #HTML #angularjs

Вопрос:

Хорошо, так что я немного застрял с этой проблемой, потому что данные отображаются неправильно, как и должно быть в моей таблице. У меня несколько ng-повторов, и я вообще не могу организовать свою таблицу. это мой HTML-код для этого:

   <tbody>
        <tr ng-repeat="wagon in vm.wagons">
            <td style="padding: 5px 5px; text-align: left;">
                <div>
                    <span class="suggestion-remove-button" style="margin-right: 10px;"><i style="margin-left:25%" class="ion-ios-close-outline" ng-click="vm.removeWagon(wagon, $index)"></i></span><span>{{wagon.name}}</span>
                </div>
            </td>
            <td style="padding: 5px 5px;">
                <span>
                <div ng-repeat="load in vm.suggestion.feeding_1.loads track by $index" class="editable-suggestion-value">
                    <span class="suggestion-remove-button" style="margin-right: 10px;"><i class="ion-ios-close-outline" ng-click="vm.removeLoad($index, 'feeding_1')" ng-hide="vm.wagons amp;amp; vm.wagons.length == 0"></i></span> <data-i18n i18n="_m_f_recipe_load_">Load</data-i18n>amp;nbsp;{{$index 1}}:amp;nbsp;<span class="editable-load-value" ng-click="vm.wagons amp;amp; vm.wagons.length > 0 amp;amp; vm.openEditLoadModal($index, 'feeding_1')">{{load.value}}</span>{{vm.weight}} <span>({{load.wagon_name}})</span>
                </div>
            </span>
            </td>
            <td style="padding: 5px 5px;">
                <span>
                <div ng-repeat="load in vm.suggestion.feeding_2.loads track by $index" class="editable-suggestion-value">
                    <span class="suggestion-remove-button" style="margin-right: 10px;"><i class="ion-ios-close-outline" ng-click="vm.removeLoad($index, 'feeding_2')" ng-hide="vm.wagons amp;amp; vm.wagons.length == 0"></i></span><data-i18n i18n="_m_f_recipe_load_">Load</data-i18n>amp;nbsp;{{$index 1}}:amp;nbsp;<span class="editable-load-value" ng-click="vm.wagons amp;amp; vm.wagons.length > 0 amp;amp; vm.openEditLoadModal($index, 'feeding_2')">{{load.value}}</span>{{vm.weight}} <span>({{load.wagon_name}})</span>
                </div>
                </span>
            </td>
            <td style="padding: 5px 5px;">
                <span>
                <div ng-repeat="load in vm.suggestion.feeding_3.loads track by $index" class="editable-suggestion-value">
                    <span class="suggestion-remove-button" style="margin-right: 10px;"><i class="ion-ios-close-outline" ng-click="vm.removeLoad($index, 'feeding_3')" ng-hide="vm.wagons amp;amp; vm.wagons.length == 0"></i></span> <data-i18n i18n="_m_f_recipe_load_">Load</data-i18n>amp;nbsp;{{$index 1}}:amp;nbsp;<span class="editable-load-value" ng-click="vm.wagons amp;amp; vm.wagons.length > 0 amp;amp; vm.openEditLoadModal($index, 'feeding_3')">{{load.value}}</span>{{vm.weight}} <span>({{load.wagon_name}})</span>
                </div>
                </span>
            </td>
        </tr>
        <tr>
            <td style="padding: 5px 5px;" class="mixing-suggestion-primary">
                <data-i18n i18n="_m_f_recipe_number_of_loads_">Number of loads</data-i18n>
            </td>
            <td style="padding: 5px 5px;">{{vm.suggestion.feeding_1.number_of_loads}}</td>
            <td style="padding: 5px 5px;">{{vm.suggestion.feeding_2.number_of_loads}}</td>
            <td style="padding: 5px 5px;">{{vm.suggestion.feeding_3.number_of_loads}}</td>
        </tr>
    </tbody>

Итак, я хочу отобразить нагрузку для каждого вагона. И вот как это выглядит сейчас.. Загрузки отображаются только для первого вагона
таблица
Если вам нужно больше кода, я могу предоставить

Комментарии:

1. Если вы можете предоставить данные для загрузки json, которые были бы полезны

2. загружает: {значение: 454, wagon_id: 57, wagon_name: «W2»}; wagon: {create_date: «2019-09-25T09:10:20Z», herd_id: 630, id: 57,имя: «W2», number_of_all: null, выбрано: true, значение: 4540, видимый: true, объем: 0, вес: 4,54}

3. Если вы хотите, чтобы грузы были подключены к вагонам в первом столбце, вам следует организовать свои данные таким образом, чтобы нагрузка была частью объекта wagon в vm.wagons.

4. Есть идеи, как это сделать?

5. Я начал скрипку здесь. Поскольку я пропускаю большую часть вашего приложения, мне пришлось сделать пару предположений. jsfiddle.net/xfoby59s Это только начало. Я предлагаю поиграть с ним, чтобы посмотреть, как это работает.