Question

我使用asp.net网络api和angularjs（javascript）工作了简单的Web应用程序。在此应用中，我有一个主网格，当我单击行内的按钮时，将打开模式对话框。模态对话框包含具有许多项目的明细网格（表）。见下图：

他的数据中的每个项目都包含parentId。在我的情况下，每个详细信息网格项目都包含id = 1，我们可以在下一张图片中看到：

此解决方案（当我单击“加号”按钮时）工作正常（仅Kolicina字段可以进行更改）。但是，我们必须逐行单击加号按钮以保存所有更改。我的问题是，如何实现功能，在该对话框中，模式对话框中只有一个按钮可以保存所有行更改。我假设应该将数组（所有项目都进行更改）转发给Web api控制器方法。感谢您提供任何有用的信息。

编辑我的html模态如下：

<div id="vipZaglavljeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content" style="overflow:scroll;max-height:700px;width:750px;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">VIP Stavke</h4>
        </div>
        <div class="modal-body">
            <table id="myTableModal" class="table table-bordered table-condensed">
                <thead>
                    <tr>
                        <th style="padding-left:15px;font-size:medium;">Id</th>
                        <th style="font-size:medium">Sifra</th>
                        <th style="font-size:medium">Naziv</th>
                        <th style="font-size:medium">Kolicina</th>
                        <th style="font-size:medium;width:70px;">Prodavnica</th>
                        <th style="font-size:medium">***</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="stavka in stavke track by $index">
                        <td style="padding-left:15px;font-size:medium;padding-top:12px;">{{stavka.Id}}</td>
                        <td style="font-size:medium;padding-top:12px;">{{stavka.Sifra}}</td>
                        <td style="font-size:medium;padding-top:12px;">{{stavka.Naziv}}</td>
                        <td style="font-size:medium;padding-top:12px;"><input type="text" class="form-control" ng-model="stavka.Kolicina" style="width:70px;margin-top:-5px;"/></td><!--ng-class="{ nakonStoKliknesSave: kliknutoNaSave[$index] }"-->
                        <td style="font-size:medium;padding-top:12px;">{{stavka.Prodavnica}}</td>
                        <td style="font-size:medium;padding-top:12px;"><button ng-click="vipZaglavljePut(stavka.Id, stavka)" ng-disabled="((formatDateScope(stavka.VIPZaglavlje.Pocetak) < trenutniDatumIVrijeme && formatDateScope(stavka.VIPZaglavlje.Kraj) < trenutniDatumIVrijeme) || (formatDateScope(stavka.VIPZaglavlje.Pocetak) > trenutniDatumIVrijeme && formatDateScope(stavka.VIPZaglavlje.Kraj) > trenutniDatumIVrijeme) || (formatDateScope(stavka.VIPZaglavlje.Pocetak) > trenutniDatumIVrijeme && formatDateScope(stavka.VIPZaglavlje.Kraj) < trenutniDatumIVrijeme))" class="btn btn-primary" style="margin-top:-5px">+</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" style="font-size:medium">OK</button>
            <!--<button type="button" class="btn btn-primary" ng-click="osnovnaSredstvaDelete()" style="font-size:medium">Da</button>-->
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Answer 1

我是否正确理解-您只想要一个按钮来保存表中的所有datas。您可以在表格的每一行和顶部的添加按钮中添加一个复选框，该复选框将所有已检查的数据求和并发送到 HTML：

   <table id="myTableModal" class="table table-bordered table-condensed">
                <thead>
                    <tr>
                        <th style="padding-left:15px;font-size:medium;">Id</th>
                        <th style="font-size:medium">Sifra</th>
                        <th style="font-size:medium">Naziv</th>
                        <th style="font-size:medium">Kolicina</th>
                        <th style="font-size:medium;width:70px;">Prodavnica</th>
                        <th style="font-size:medium">***</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="stavka in stavke track by $index">
                        <td style="padding-left:15px;font-size:medium;padding-top:12px;">{{stavka.Id}}</td>
                        <td style="font-size:medium;padding-top:12px;">{{stavka.Sifra}}</td>
                        <td style="font-size:medium;padding-top:12px;">{{stavka.Naziv}}</td>
                        <td style="font-size:medium;padding-top:12px;"><input type="text" class="form-control" ng-model="stavka.Kolicina" style="width:70px;margin-top:-5px;"/></td><!--ng-class="{ nakonStoKliknesSave: kliknutoNaSave[$index] }"-->
                        <td style="font-size:medium;padding-top:12px;">{{stavka.Prodavnica}}</td>
                        <td style="font-size:medium;padding-top:12px;"> <button class="btn" ng-click="vipZaglavljePut(stavka)">+</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
 <div ng-if="Kolicina">{{id}} : {{Kolicina}}</div>

JS：

    $scope.vipZaglavljePut = function (stavka){
          console.log(stavka.Kolicina);
          $scope.id = stavka.Id;
          $scope.Kolicina = stavka.Kolicina;
}

这里很矮：http://plnkr.co/edit/h1Jao3YfbFCd2n33bQtk?p=preview

如何将所有更改的数据保存在详细信息网格（表）中

1 个答案: