angucompletealt module not working when ngRoute module is added in angularjsappconfigjs 39use strict39angularmodule39myApp39config39routeProvider39 39locationProvider39 function routeProvider locationProvider routeProvider when39EBSAjsN39 templateUrl 39EBSAjsNViewsloginhtml39 controller 39loginController39 when39dashboard39 templateUrl 39EBSAjsNViewsdashboardhtml

Hi skpCheck this example Now please take its reference and correct your codeHTMLIndexhtmllthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs169angularminjs34gtltscriptgt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs169angularroutejs34gtltscriptgt ltscript src34AnguAutoCompleteangucompletealtjs34 type34textjavascript34gtltscriptgt ltlink href34AnguAutoCompleteangucompletealtcss34 rel34stylesheet34 type34textcss34 gt ltscript type34textjavascript34gt var app angularmodule34MyApp34 34ngRoute34 34angucompletealt34 appcontroller39HomeController39 function scope scopeHome 39This is home page39

Angucompletealt wont work with angularjs versions 15x and aboveSo instead of that we have to use Angucompletealt version 30Modified angucompletealt code ltangucompletealt id34txtinvnumber34 placeholder34Search Invoice34 pause3410034 selectedobject34selectedInvoice34 remoteurl34apicontrollernamemethodname34 remoteurldatafield3434 localdata34warehouse34 searchfields34InvoiceNo34 titlefield34InvoiceNo34 minlength34134 inputclass34formcontrol mrsm234 matchclass34highlight34 ngclick34Search34 gt

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

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Jul 04, 2019 12:15 AM
Forum: AngularJS
Answer: 2
Views: 6160
Sample Code: Download

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;
        });
    };
});

dharmend...

0 3

Reply
ANSWER
User: dharmendr
Replied: on Jul 04, 2019 06:37 AM
Report

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

skp

0 4

Reply
ANSWER
User: skp
Replied: on Jul 12, 2019 05:30 AM
Report

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()" />

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

Company

Explore

Follow us

Contact Us