Question

我想在点击搜索按钮后使用文本字段和复选框搜索表格数据。我在下面提供了所有代码，所以我如何在http服务中传递文本字段值。点击搜索按钮后，它应该在表格中搜索，如果我想要搜索特定字段，我该怎么做？

这是我的代码

 $scope.GetProductLineSearchResult = function (prodLineList) {
        $scope.tblShow = true;
        var productLine = '';
        var count = 0;
        for (var i = 0; i < prodLineList.length; i++) {

            if (prodLineList[i].Selected == true) {
                count = count + 1;
                if (count == 1) {
                    productLine = prodLineList[i].ProdLine;
                }
                else {
                    productLine = productLine + "," + productLineList[i].ProdLine;
                }
            }
        }
        var parameters = {
            ItemId: $scope.ItemId,
            WhseId: $scope.WhseId,
            ItemDescription: $scope.ItemDescription,
            WhseAddress: $scope.WhseAddress,
            productLine: productLine,
        }

        var config = {
            params: parameters
        }
        var successCallBack = function (response) {
            usSpinnerService.spin('spinner-1'); //Keep usSpinnerService.spin(loader start) first
            $scope.ItemLogs = response.data;
            isCollapsed: false,
            $scope.viewby = 20;
            $scope.currentPage = 1;
            $scope.itemsPerPage = $scope.viewby;
            $scope.maxSize = 10; //Number of pager buttons to show
            $scope.totalItems = $scope.ItemLogs.length;
            $log.info(response);
            $scope.setPage = function (pageNo) {
                $scope.currentPage = pageNo;
            };

            $scope.pageChanged = function () {
                console.log('Page changed to: ' + $scope.currentPage);
            };

            $scope.setItemsPerPage = function (num) {
                $scope.itemsPerPage = num;
                $scope.currentPage = 1; //reset to first page
            }
            usSpinnerService.stop('spinner-1');  //keep usSpinnerService.stop(loader end) last
        }
        var errorCallBack = function (reason) {
            $scope.error = reason.data;
            $log.info(response);
        }
        $http.get("WhareHouseAddress.asmx/BinItemLogs", config)
        .then(successCallBack, errorCallBack);

HTML

<div class="row">
        <div class="col-md-8">
            <div class="col-md-5">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="txtItemId" title="Item Id" class="col-md-3 control-label">Item ID:</label>
                        <div class="col-md-5">
                            <input id="txtItemId" type="search" placeholder="Item ID" data-ng-model="ItemId" class="form-control " />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtWhse" title="Whse" class="col-md-3 control-label">Whse:</label>
                        <div class="col-md-5">
                            <input id="txtWhse" type="search" placeholder="Wharehouse ID" data-ng-model="WhseId" class="form-control " />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtProductLine" title="ProductLine" class="col-md-3 control-label">Product Line:</label>
                        <div class="col-md-8">
                            <div data-ng-repeat="lineList in prodLineList" style="float: left; width: 100px;">
                                <input id="chkProductLineList" class="regular-checkbox" data-ng-model="lineList.Selected" type="checkbox" />&nbsp;{{lineList.ProdLine}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-horizontal">
                    <div class="form-group">
                        <label for="txtItemDesc" title="Item Description" class="col-md-3 control-label">Item Desc:</label>
                        <div class="col-md-5">
                            <input id="txtItemDesc" placeholder="Item Description" type="search" data-ng-model="ItemDescription" class="form-control " />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="txtInvLocation" title="Item Id" class="col-md-3 control-label">Inv. Location:</label>
                        <div class="col-md-5">
                            <input id="txtInvLocation" placeholder="Wharehouse Address" type="search" data-ng-model="WhseAddress" class="form-control " />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-offset-3 col-md-9">
            <input id="btnSearch" type="button" value="Search" ng-click="GetProductLineSearchResult(prodLineList)" class="btn btn-default btn-msi" />
            <input id="btnClear" type="button" value="Clear" class="btn btn-default" />
        </div>
    </div>
</div>

Answer 1

如果您需要将输入值传递给组件，请尝试这样：您输入#search id。

<input #search placeholder="Search" type="text">

使用参数调用'searcValue'函数的按钮：输入值。

<button  (click)="searchValue(search.value)"></button>

如何在http服务中传递文本字段值作为参数？

1 个答案: