ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.[Solved] angucomplete-alt module not working when ngRouteIn AngularJS<p>Hi&nbsp;skp,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <p><strong>Index.html</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;AnguAutoComplete/angucomplete-alt.js&#34; type=&#34;text/javascript&#34;&gt;&lt;/script&gt; &lt;link href=&#34;AnguAutoComplete/angucomplete-alt.css&#34; rel=&#34;stylesheet&#34; type=&#34;text/css&#34; /&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#34;MyApp&#34;, [&#34;ngRoute&#34;, &#34;angucomplete-alt&#34;]); app.controller(&#39;HomeController&#39;, function ($scope) { $scope.Home = &#39;This is home page.&#39;; }); app.controller(&#39;AboutController&#39;, function ($scope) { $scope.About = &#39;This is about page.&#39;; }); app.controller(&#39;ContactController&#39;, function ($scope) { $scope.Contact = &#39;This is contact page.&#39;; }); app.controller(&#39;MyController&#39;, function ($scope) { $scope.Customers = null; $scope.SelectedCustomer = null; $scope.Customers = [ { ContactName: &#39;John Hammond&#39; }, { ContactName: &#39;Mudassar Khan&#39; }, { ContactName: &#39;Suzanne Mathews&#39; }, { ContactName: &#39;Robert Schidner&#39; } ]; }); app.config([&#39;$routeProvider&#39;, &#39;$locationProvider&#39;, function ($routeProvider, $locationProvider) { $routeProvider.when(&#34;/&#34;, { templateUrl: &#34;Views/Home.html&#34;, controller: &#39;HomeController&#39; }).when(&#34;/about&#34;, { templateUrl: &#34;Views/About.html&#34;, controller: &#39;AboutController&#39; }).when(&#34;/contact&#34;, { templateUrl: &#34;Views/Contact.html&#34;, controller: &#39;ContactController&#39; }); } ]); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34;&gt; &lt;ul&gt; &lt;li&gt;&lt;a href=&#34;#&#34;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#!about&#34;&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&#34;#!contact&#34;&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;hr /&gt; &lt;div ng-controller=&#34;MyController&#34;&gt; &lt;div angucomplete-alt id=&#34;txtCustomers&#34; placeholder=&#34;Customer Name&#34; pause=&#34;100&#34; selected-object=&#34;SelectedCustomer&#34; local-data=&#34;Customers&#34; search-fields=&#34;ContactName&#34; title-field=&#34;ContactName&#34; minlength=&#34;1&#34; input-class=&#34;form-control&#34; match-class=&#34;highlight&#34;&gt; &lt;/div&gt; &lt;br /&gt; Selected Customer : {{SelectedCustomer.title}} &lt;/div&gt; &lt;hr /&gt; &lt;div ng-view&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>Home.html</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Home&lt;/h1&gt; &lt;hr /&gt; &lt;p&gt;{{ Home }}&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>About.html</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;About&lt;/h1&gt; &lt;hr /&gt; &lt;p&gt;{{ About }}&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>Contact.html</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Contact&lt;/h1&gt; &lt;hr /&gt; &lt;p&gt;{{ Contact }}&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/9gHwq5D.gif" alt="" width="249" height="311" /></span></strong></p>https://www.aspforums.net:443/Threads/153871/Solved-angucomplete-alt-module-not-working-when-ngRouteIn-AngularJS/https://www.aspforums.net:443/Threads/153871/Solved-angucomplete-alt-module-not-working-when-ngRouteIn-AngularJS/Thu, 04 Jul 2019 06:37:06 GMT[Solved] angucomplete-alt module not working when ngRouteIn AngularJS<p>Angucomplete-alt won't work with angularjs versions 1.5.x and above.</p> <p>So, instead of that, we have to use&nbsp;Angucomplete-alt version 3.0.</p> <p><strong><em>Modified angucomplete-alt code :</em></strong></p> <pre class="brush: js">&lt;angucomplete-alt id=&#34;txtinvnumber&#34; placeholder=&#34;Search Invoice&#34; pause=&#34;100&#34; selected-object=&#34;selectedInvoice&#34; remote-url=&#34;/api/controllername/methodname&#34; remote-url-data-field=&#34;&#34; local-data=&#34;warehouse&#34; search-fields=&#34;InvoiceNo&#34; title-field=&#34;InvoiceNo&#34; minlength=&#34;1&#34; input-class=&#34;form-control mr-sm-2&#34; match-class=&#34;highlight&#34; ng-click=&#34;Search()&#34; /&gt;</pre> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/153871/Solved-angucomplete-alt-module-not-working-when-ngRouteIn-AngularJS/https://www.aspforums.net:443/Threads/153871/Solved-angucomplete-alt-module-not-working-when-ngRouteIn-AngularJS/Fri, 12 Jul 2019 05:30:47 GMT