我想一次更新每一行。使用angularjs

时间:2016-01-26 09:59:39

标签: java angularjs

使用angularjs创建了list函数。 尝试进行更新功能。 我不知道如何创建updateReq。 我将使用循环中的变量 我不知道如何在updateReq上放置变量。 谢谢

enter code here

开始();

function start() {



    var myApp = angular.module('myApp', []);

    myApp.controller('mainCtrl',['$scope', '$http', function($scope, $http){


        $scope.init = function() {

            console.log("${pageContext.request.contextPath}");
            console.log('${pageContext.request.serverName}');
        }

        $scope.productsList = function(){

            var selectsiteCode = $('#search_form').find("#scode").text();

            if(selectsiteCode != null && selectsiteCode!= "" && selectsiteCode!="undefined")
            {
            $http({
                method : 'get',
                url : '${pageContext.request.contextPath}/products/productsList?selectsiteCode=' + selectsiteCode,
                param : {

                } 

                })
                .success(function($data){
                    $scope.selectResult = $data;
                    $scope.ProductsList = $data;
                });
            }
            else
                {
                    alert("choses store");
                }
        }


        $scope.productsUpdate = function() {

            var updateReq = new Object();

            updateReq.siteCode = $("siteCode_{{$index}}").val;
            alert(updateReq.siteCode);
        }



    }]);

    } ]);
}

             `enter code here`<form>
                <div align = "right">
                    <button ng-click="productsUpdate()" >save</button>
                </div>
                    <table class="table table-striped table-bordered table-hover" id="Tuser" >
                        <thead style="text-align:center">
                            <tr>

                                <td>sitecode</td>
                                <td>productscode</td>
                                <td>productsname</td>
                                <td>price</td>
                                <td>kitchenPRT</td>
                            </tr>
                        </thead>

                        <tbody id = "select_check" style="text-align:center">
                            <tr ng-model='selectproducts' ng-repeat = "item in selectResult | orderBy : 'itemID'">
                                <td><input type="text" id='siteCode_{{$index}}'  value= "{{item.siteCode}}" disabled kr-Input></td>
                                <td><input type="text" id='itemID_{{$index}}' value = "{{item.itemID}}" disabled kr-Input></td>
                                <td><input type="text" id='itemName_{{$index}}' value = "{{item.itemName}}"></td>
                                <td><input type="text" id='itemAmt_{{$index}}' value = "{{item.itemAmt}}"></td>
                                <td>
                                    <select id="kitchenPRT_Y_{{$index}}" class = 'form-control' >
                                        <option id="kitchenPRT_Y_{{$index}}" value='{{ item.kitchenPRT_Y =="Y" ? "Y" : "N" }}'>{{ item.kitchenPRT_Y =="Y" ? "Y" : "N" }}</option>
                                        <option id="kitchenPRT_Y_{{$index}}" value='{{ item.kitchenPRT_Y !="Y" ? "Y" : "N" }}'>{{ item.kitchenPRT_Y !="Y" ? "Y" : "N" }}</option>
                                    </select>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    </form>

1 个答案:

答案 0 :(得分:0)

在控制器的$scope中声明产品对象:

$scope.product = {};
  

范围:是一个引用应用程序模型的对象。它是表达式的执行上下文。

您必须在输入中使用ng-model数据绑定)来跟踪新的属性值:

<input type="text" ng-model="product.name">
  

数据绑定:是模型和视图组件之间数据的自动同步。 Angular实现的方式   数据绑定允许您将模型视为单一的事实来源   你的申请。

enter image description here

现在您只需将绑定的更新请求添加到提交按钮:

<button ng-click="productsUpdate()" >save</button>

使用Http PUT 方法更新请求(从$scope检索新产品):

$scope.productsUpdate = function() {
 var req = {
   method: 'PUT',
   url: 'http://example.com',
   headers: {
     'Content-Type': undefined
   },
   //Get the new product
   data: $scope.product;
  }
  $http(req).then(function(){...}, function(){...});
}