the autocomplete textbox doesnt work when it is put inside ngrepeat of a tableIt is actually a bugHow to solve itvar poDetails scopeitmDetails scopepoId nullscopesave function poDetails 34PURCHASEORDERNO34 scopepoNo 34SUPPLIERID34 scopeselectSupplieroriginalObjectSUPPLIERID 34CREATEDDATE34 scopecurrentdate 34SUBTOTAL34 scopesubTotal 34GRANDTOTAL34 scopetotal http

Implement AutoComplete TextBox inside ng-repeat in AngularJS

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Dec 06, 2019 02:36 AM
Forum: AngularJS
Answer: 1
Views: 4681
Sample Code: Download

the autocomplete textbox doesn't work when it is put inside ng-repeat of a table.

It is actually a bug.

How to solve it?

var poDetails = {};
$scope.itmDetails = {};
$scope.poId = null;
$scope.save = function () {
    poDetails = {
        "PURCHASEORDERNO": $scope.poNo,
        "SUPPLIERID": $scope.selectSupplier.originalObject.SUPPLIERID,
        "CREATEDDATE": $scope.currentdate,
        "SUBTOTAL": $scope.subTotal,
        "GRANDTOTAL": $scope.total
    };

    $http({
        method: "POST",
        url: "http://localhost:49556/api/purchaseOrder/addPoDetails",
        data: JSON.stringify(poDetails),
        dataType: 'json',
        contentType: 'application/json'
    }).then(function (data, status) {
        //alert('SUCCESS');
        $scope.poId = JSON.parse(data.data);
        //alert($scope.poId);      
        debugger;
        var a = $scope.itmDetails.length;
        for (var i = 0; i < a; i++) {
            debugger;
            $scope.itmDetails = {
                "POID": $scope.poId,
                "ITEMID": $scope.selectItem.originalObject.ITEMID,
                "UNITAMOUNT": $scope.itemDetail[i].rate,
                "REQUIREDQTY": $scope.itemDetail[i].qty,
                "TOTALAMOUNT": $scope.itemDetail[i].amt
            };
            alert($scope.itmDetails);
            $http({
                method: "POST",
                url: "http://localhost:49556/api/purchaseOrder/addItemDetails",
                data: JSON.stringify($scope.itmDetails),
                dataType: 'json',
                contentType: 'application/json'
            }).then(function (data, status) {
                alert('SUCCESS');
            });
        }
    });
}

It is not getting inserted into the database, getting an error like this in the below mentioned line of code :

TypeError: Cannot read property 'originalObject' of null

"ITEMID": $scope.selectItem.originalObject.ITEMID,

<tr ng-repeat="itemDetail in itemDetails">
    <td>
        {{$index + 1}}
    </td>
    <td style="text-align: left">
        <angucomplete-alt id="txtinvnumber" placeholder="Search Item Name" pause="100" selected-object="selectItem"
            remote-url="http://localhost:49556/api/purchaseOrder/getPoItem" remote-url-data-field=""
            local-data="item" search-fields="ITEMNAME" title-field="ITEMNAME" minlength="1"
            input-class="form-control mr-sm-2" match-class="highlight" ng-click="Search()"></angucomplete-alt>
        <input type="button" value="+" ng-click="addNewRow()" />
        <input type="button" value="-" ng-click="removeRow($index)" />
    </td>
    <td>
        <input type="text" ng-model="itemDetail.qty" ng-change="calc($index)" style="width: 40px;
            text-align: right">
    </td>
    <td>
        <input type="text" ng-model="itemDetail.rate" ng-change="calc($index)" style="width: 60px;
            text-align: right">
    </td>
    <td>
        <input type="text" ng-model="itemDetail.amt" value="{{amount}}" style="width: 60px;
            text-align: right" readonly>
    </td>
</tr>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Dec 07, 2019 05:01 AM
Modified: on Dec 07, 2019 05:05 AM
Report

Hi skp,

There is no bug. The autocomplete textbox working properly.

There is problem with your code implementation.

For selecting you need to pass the index for saving for that particular row.

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AngularJS AutoComplete ng-repeat</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="AnguAutoComplete/angucomplete-alt.js" type="text/javascript"></script>
    <link href="AnguAutoComplete/angucomplete-alt.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var app = angular.module("MyApp", ["angucomplete-alt"]);
        app.controller('MyController', function ($scope, $window) {
            $scope.Customers = [{ Id: 1, Name: 'John Hammond' },
                                { Id: 2, Name: 'Mudassar Khan' },
                                { Id: 3, Name: 'Suzanne Mathews' },
                                { Id: 4, Name: 'Robert Schidner'}];
            $scope.SelectedCountry = [];
            $scope.Countries = [{ Name: 'United States', Code: 'US' },
                                { Name: 'India', Code: 'IN' },
                                { Name: 'France', Code: 'FR' },
                                { Name: 'Russia', Code: 'RU'}];
            $scope.Save = function () {
                var message = "Name\t\tCountry\n-------\t\t----------\n";
                for (var i = 0; i < $scope.Customers.length; i++) {
                    var name = $scope.Customers[i].Name;
                    var country = $scope.SelectedCountry[i] != undefined ? $scope.SelectedCountry[i].originalObject.Name : "";
                    message += name + "\t" + country + "\n";
                }
                $window.alert(message);
            };
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table class="table">
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Country</th>
            </tr>
            <tr ng-repeat="customer in Customers">
                <td>{{customer.Id}}</td>
                <td>{{customer.Name}}</td>
                <td>
                    <angucomplete-alt id="txtCountry" placeholder="Select Country" pause="100" selected-object="SelectedCountry[$index]"
                        local-data="Countries" search-fields="Name" title-field="Name" minlength="1"
                        input-class="form-control" match-class="highlight" />
                </td>
            </tr>
        </table>
        <input type="button" value="Save" ng-click="Save()" />
    </div>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Implement AutoComplete TextBox inside ng-repeat in AngularJS

Company

Explore

Follow us

Contact Us