获取ng-repeat中输入的更新值角度Js

时间:2018-01-31 23:34:10

标签: angularjs angularjs-ng-repeat angularjs-ng-model

我在表格中输入了 ng-repeat ,我希望能够通过一次点击获取所有输入的更新值。

我的观点:

<tr ng-repeat="sf in selectedFacture">

        // displaying default values in the input
        <td><input class="facture_item_name" ng-model="sf.facture_item_name" value="{{sf.facture_item_name}}" type="text"/></td>
        <td><input class="fcls_crt" ng-model="sf.fcls_crt" value="{{sf.fcls_crt}}"  type="number"/></td>
        <td><input class="fpiece" ng-model="sf.fpiece" value="{{sf.fpiece}}" type="number"/></td>
        <td colspan="4"><input type="text" class="form-control note" ng-model="sf.note" value="{{sf.note}}"/></td>
    <tr>
        <td ng-click="updateFacture(sf.id,sf,sf.facture_type,sf.item_id)">SUBMIT</td>
    </tr>
</tr>

JS:

// getting new values and send them to server side
$scope.updateFacture=function(id,sf,type,item_id){
        var url = '../php/history.php';
        var func = "updateFacture";

        sf = sf || {};
        var editedQuanCls= sf.fcls_crt,
        editedQuan_piece= sf.fpiece,
        editedQuan_cls_crt_gate= sf.fcls_crt_gate,
        editedQuan_piece_gate= sf.fpiece_gate,
        editedNote= sf.note;

        var data = {"function": func,
            "factureId":id,
            "item_id":item_id,
            "facture_type":facture_type,
            "editedQuanCls":editedQuanCls,
            "editedQuan_cls_crt_gate":editedQuan_cls_crt_gate,
            "editedQuan_piece":editedQuan_piece,
            "editedQuan_piece_gate":editedQuan_piece_gate,
            "editedNote":editedNote};

        var options = {
            type : "get",
            url : url,
            data: data,
            dataType: 'json',
            async : false,
            cache : false,
            success : function(response,status) {
                alert("success")
            },
            error:function(request,response,error){
                alert("errro: " + error)
            }
        };
        $.ajax(options);
    }

我尝试将更新后的按钮放在td旁边的输入中,它工作正常,但这会分别更新每一行,但我需要一键更新它们。

我会附上我的观看次数的屏幕截图。Inputs filled out with ng-repeat and the submit button is in a tr inside the (ng-repeat tr

非常感谢提前

2 个答案:

答案 0 :(得分:1)

<input class="facture_item_name" ng-model="sf.facture_item_name" value="{{sf.facture_item_name}}" ng-change="updateValues(sf.facture_item_name)" type="text"/>

$scope.updateValues=function(value){
$scope.sf.facture_item_name=value;
}

答案 1 :(得分:0)

您需要的是包装函数。 首先在页面上添加一个覆盖All选项的按钮,如:

 <button ng-click="updateAllFacture()">SUBMIT ALL</button>

然后添加包装函数。所有这一切都循环遍历列表中的每个项目并调用更新函数。 包装函数如下所示:

 $scope.updateAllFacture=function(){

    angular.forEach($scope.res, function(sf, index) {

      $scope.updateFacture=function(sf.id,sf,sf.facture_type,sf.item_id );

    });

  };

如果你有很多物品,那么会有很多电话回到你的api。考虑将表单中的所有输入作为帖子提交 - 然后只会有一个回调,但您需要为此编程控制器。

相关问题