[Solved] angucomplete-alt module not working when ngRouteIn AngularJS

Last Reply one month ago By skp

Posted one month ago

angucomplete-alt module not working when ngRoute module is added in angularjs

app.config.js :

'use strict';
angular.module('myApp')
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.
    when('/EBSAjsN', {
        templateUrl: 'EBSAjsN/Views/login.html',
        controller: 'loginController'
    })
     .when('/dashboard', {
         templateUrl: 'EBSAjsN/Views/dashboard.html',
         controller: 'dashboardController'
     })
     .when('/receipt', {
         templateUrl: 'EBSAjsN/Views/receipt.html',
         controller: 'receiptController'
     })
     .when('/issue', {
         templateUrl: 'EBSAjsN/Views/issue.html',
         controller: 'issueController'
     })
    .otherwise({
        redirectTo: '/EBSAjsN'
    });
    $locationProvider.html5Mode(true);
}]);

app.module.js :

angular.module('myApp', ['ngRoute', 'ngStorage', 'angucomplete-alt']);

receipt.html :

<link href="http://stagingserver:85/EBSAjsN/Styles/css/angucomplete-alt.css" rel="stylesheet" />
<script src="http://stagingserver:85/EBSAjsN/Scripts/js/angucomplete-alt.js"></script>
<form class="form-inline my-0 ml-auto">
    <!--<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">-->
    <angucomplete-alt id="txtinvnumber" placeholder="Search Invoice" pause="100"
         selected-object="Selectedinvoice" local-data="warehouse" search-fields="InvoiceNo"
         title-field="InvoiceNo" minlength="1" input-class="form-control mr-sm-2" match-class="highlight"
         ng-click="Search()" />
    <!--<button class="btn btn-secondary my-2 my-sm-0 " type="submit">Search</button>-->
</form>

receipt.js :

angular.module('myApp')
.controller('receiptController', function ($scope, $sessionStorage, $http, $window, $location) { 
    //to get username from the login page and display it in this page
    var user = JSON.parse($sessionStorage.SessionMessage.replace('[', '').replace(']', ''));
    user.username = user.username.substring(0, 1).toUpperCase() + user.username.substring(1, user.username.length);
    $scope.username = user.username;
    //alert($scope.username);

    //to display count of receipt and issue
    $scope.count = null;
    $http.get("http://stagingserver:85/EBSApi/api/Warehouse/GetInvoiceCount")
    .then(function (response) {
        $scope.count = JSON.parse(response.data);
        $scope.count.Receipt = $scope.count[0].Receipt;
        $scope.count.Issue = $scope.count[0].Issue;
    })

    //to get all invoices and display it in autocomplete autobox      
    $scope.warehouse = null;
    $scope.Selectedinvoice = null;
    var get = $http({
        method: "GET",
        url: "http://stagingserver:85/EBSApi/api/Warehouse/GetAllInvoices",
        dataType: 'json',
        d: {},
        headers: { "Content-Type": "application/json" }
    });
    get.then(function (d, status) {
        $scope.warehouse = JSON.parse(d.data);
    });   

    //to select and display the selected invoice number details and its total pallets and nos.
    $scope.mydata = null;
    $scope.tdata = null;
    $scope.Search = function () {
        debugger;
        $http.get("http://stagingserver:85/EBSApi/api/Warehouse/GetInvoiceDetails?invoiceno=" + $scope.Selectedinvoice.originalObject.InvoiceNo + "")
        .then(function (response) {
            $scope.mydata = JSON.parse(response.data);
        });
        $http.get("http://stagingserver:85/EBSApi/api/Warehouse/GetTotalQuantity?invoiceno=" + $scope.Selectedinvoice.originalObject.InvoiceNo + "")
        .then(function (response) {
            $scope.item = "";
            $scope.tdata = JSON.parse(response.data);
            $scope.tdata.TotalQty = $scope.tdata[0].TotalQty;
            $scope.tdata.TotalPallets = $scope.tdata[0].TotalPallets;
        });
    };
});

 

Posted one month ago

Hi skp,

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

HTML

Index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.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", ["ngRoute", "angucomplete-alt"]);
        app.controller('HomeController', function ($scope) {
            $scope.Home = 'This is home page.';
        });
        app.controller('AboutController', function ($scope) {
            $scope.About = 'This is about page.';
        });
        app.controller('ContactController', function ($scope) {
            $scope.Contact = 'This is contact page.';
        });
        app.controller('MyController', function ($scope) {
            $scope.Customers = null;
            $scope.SelectedCustomer = null;
            $scope.Customers = [
                { ContactName: 'John Hammond' },
                { ContactName: 'Mudassar Khan' },
                { ContactName: 'Suzanne Mathews' },
                { ContactName: 'Robert Schidner' }
            ];
        });
        app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
            $routeProvider.when("/", {
                templateUrl: "Views/Home.html",
                controller: 'HomeController'
            }).when("/about", {
                templateUrl: "Views/About.html",
                controller: 'AboutController'
            }).when("/contact", {
                templateUrl: "Views/Contact.html",
                controller: 'ContactController'
            });
        } ]);
    </script>
</head>
<body>
    <div ng-app="MyApp">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#!about">About</a></li>
            <li><a href="#!contact">Contact</a></li>
        </ul>
        <hr />
        <div ng-controller="MyController">
            <div angucomplete-alt id="txtCustomers" placeholder="Customer Name" pause="100" selected-object="SelectedCustomer"
                local-data="Customers" search-fields="ContactName" title-field="ContactName"
                minlength="1" input-class="form-control" match-class="highlight">
            </div>
            <br />
            Selected Customer : {{SelectedCustomer.title}}
        </div>
        <hr />
        <div ng-view>
        </div>
    </div>
</body>
</html>

Home.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h1>Home</h1>
    <hr />
    <p>{{ Home }}</p>
</body>
</html>

About.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h1>About</h1>
    <hr />
    <p>{{ About }}</p>
</body>
</html>

Contact.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h1>Contact</h1>
    <hr />
    <p>{{ Contact }}</p>
</body>
</html>

Screenshot


Posted one month ago

Angucomplete-alt won't work with angularjs versions 1.5.x and above.

So, instead of that, we have to use Angucomplete-alt version 3.0.

Modified angucomplete-alt code :

<angucomplete-alt id="txtinvnumber"
    placeholder="Search Invoice"
    pause="100"
    selected-object="selectedInvoice"
    remote-url="/api/controllername/methodname"
    remote-url-data-field=""
    local-data="warehouse"
    search-fields="InvoiceNo"
    title-field="InvoiceNo"
    minlength="1"
    input-class="form-control mr-sm-2"
    match-class="highlight"
    ng-click="Search()" />