从表格中的ng repeat发送所有值

时间:2017-06-07 17:40:33

标签: javascript angularjs

我正在生成ng-repat,但我需要更改数据并将所有这些发送到后端进行编辑我的问题是当我想要这样做时,无法获取ng-repeat中的表单值 enter image description here

图片是html看起来的形式:

 <form name="FormTablesPackageCreation">
                    <table class="table table-striped ta  ble-bordered">
                        <thead>
                        <tr>
                            <th>Estado</th>
                            <th>Especie</th>
                            <th>Tipo</th>
                            <th>Dimension</th>
                            <th>ubicacion</th>
                            <th>largo</th>
                            <th>Ancho</th>
                            <th>Espesor</th>
                            <th>Cantidad</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="packageList in dataListTables">
                                <input class="form-control" type="hidden" ng-value="packageList.id_table"  name="id_table[{{$index}}]" id="id_table[{{$index}}]">
                                <input class="form-control" type="hidden" ng-value="packageList.id_package" name="id_package[{{$index}}]" id="id_package[{{$index}}]">
                                <td>
                                    <input class="form-control" type="text" ng-value="packageList.estado" ng-model="vm.estado" name="estado[{{$index}}]" id="estado[{{$index}}]" readonly>
                                </td>
                                <td>
                                    <input class="form-control" type="text" ng-value="packageList.especie" name="especie[{{$index}}]" id="especie[{{$index}}]" readonly>
                                </td>
                                <td>
                                    <input class="form-control" type="text" ng-value="packageList.ubicacion" name="ubicacion[{{$index}}]" id="ubicacion[{{$index}}]" readonly>
                                </td>
                                <td>
                                    <input class="form-control" type="text" ng-value="packageList.dimension" name="dimension[{{$index}}]" id="dimension[{{$index}}]" readonly>
                                </td>
                                <td>
                                    <input class="form-control" type="text" ng-value="packageList.tipo" value="{{packageList.tipo}}" name="tipo[{{$index}}]" id="tipo[{{$index}}]" readonly>
                                </td>

                                <td>
                                    <input class="form-control" type="text" ng-value="packageList.humedad" value="{{packageList.humedad}}" name="humedad[{{$index}}]" id="humedad[{{$index}}]" readonly>
                                </td>
                                <td>
                                    <input class="form-control" type="text" ng-value="packageList.disponible" value="{{packageList.disponible}}" name="disponible[{{$index}}]" id="disponible[{{$index}}]" readonly>
                                </td>
                                <td>
                                    <input class="form-control" type="text" ng-value="packageList.largo" name="largo[{{$index}}]" id="largo[{{$index}}]" readonly>
                                </td>
                                <td>
                                    <input class="form-control" type="text" ng-value="packageList.ancho" name="ancho[{{$index}}]" id="ancho[{{$index}}]" readonly>
                                </td>
                                <td>
                                    <input class="form-control" type="text" ng-value="packageList.espesor" name="espesor[{{$index}}]" id="espesor[{{$index}}]" readonly>
                                </td>
                                <td>
                                    <input class="form-control" type="text" ng-model="packageList.cantidad" ng-value="packageList.cantidad" ng-change=""  name="cantidad[{{$index}}]" id="cantidad[{{$index}}]" required>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>Cantidad de tablas</td>
                                <td>
                                    <input class="form-control" type="text" ng-model="vm.total" ng-value="dataListTables | sumByColumn: 'cantidad'" name="total" id="total" readonly>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>Cantidad de tablas nuevo paquete</td>
                                <td>
                                    <input class="form-control" type="text" ng-model="vm.Referencial" ng-value="sumNewCan(dataListTables | sumByColumn: 'cantidad')" readonly>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div>
                        <br>
                        <button class="btn btn-primary btn-lg" ng-click="crearPaquete()">Crear nuevo Paquetes</button>
                    </div>
                </form>

我是如何尝试获取价值的:

$scope.crearPaquete = function ()
{
    var vm = this;
    $scope.seleccionadorEspecies = false;
    $scope.creadorPaquetes = false;
    $scope.verificacionPaquetes = true;

    for (var i = 0; i < FormTablesPackageCreation.cantidad.length; i++)
    {
        console.log(FormTablesPackageCreation.id_table[i].value);
        console.log(FormTablesPackageCreation.id_package[i].value);
        console.log(FormTablesPackageCreation.cantidad[i].value);
    }
};

我需要获取ng-repeat的数据,尝试另一种方法但是还没有工作。

2 个答案:

答案 0 :(得分:1)

非常简单。 在输入标签中添加ng-model,如下所示

<input class="form-control" type="text" ng-value="packageList.humedad" value="{{packageList.humedad}}" ng-model ="packageList.humedad" name="humedad[{{$index}}]" id="humedad[{{$index}}]" readonly>

您可以在$ scope.dataListTables中获取控制器中的更新值。希望它会对你有所帮助。

答案 1 :(得分:1)

您不应该尝试通过表单获取数据 - 它应该都是HTML中的模型绑定到dataListTables集合中的ng-model指令(而不是{{ 1}})。由于你还没有发布你的控制器代码,所以很难进一步,但假设你的ng-valuedataListTables变量(它不应该 - 总是分配给控制器变量!!),你可以在页面生命周期中随时访问控制器中的数据,如下所示:

<强> HTML

$scope(删除ng-value)

<强>控制器

<input ... ng-model="packageList.attribute" />

我强烈建议您使用angular.forEach($scope.dataListTables, function(obj) { console.log(obj.estado); console.log(obj.largo); console.log(obj.ancho); // and so on }); 语法(ng-controller)使用as,然后在控制器代码中将ng-controller="myController as myCtrl"分配给dataListTables,如此:

this

然后修改您的HTML以访问ngApp.controller("myController", function($scope) { this.dataListTables = { ... your data ... }; }); 变量而不是隐含的myCtrl

$scope

作为参考,请在“角点规则”上快速浏览一下,看看为什么使用ng-repeat = "packageList in myCtrl.dataListTables"变量是一个坏主意。