We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core
  4. How to use in AngularJS

How to use in AngularJS

Hello, 

I've got a little problem. I don't know how i can use autocomplete in AngularJS. The whole project is ASP.Core page with angularjs scripts.

Right now it looks like this:

  <ej-autocomplete e-select="select" id="searchSlownik" locale="pl-PL" min-character="0" width="100%" filter-type="@FilterOperatorType.Contains">

<e-datamanager url="/Slownik/WszystkieSlowniki" adaptor="UrlAdaptor" offline="false"></e-datamanager>

 <e-autocomplete-fields key="SlownikId" text="Nazwa" />

</ej-autocomplete>

It work's but i need to access selected item in AngularJS script. How can i add a AngularJS function to select event?

Right now i ended with something like this but it not working. 

<input ej-autocomplete e-select="select" id="srch" e-locale="pl-PL"  e-min-character="0" e-width="100%" e-filter-type="@FilterOperatorType.Contains" e-fields-key="SlownikId" e-fields-text="Nazwa" e-datamanager-url="/Slownik/WszystkieSlowniki" e-datamanager-adaptor="UrlAdaptor" e-datamanager-offline="false"/>

The problem is with datamanager. I don't know if it's proper way to configure it.


1 Reply
AP Arun Palaniyandi Syncfusion Team August 19, 2017 01:22 PM UTC

Hi Mariusz Wojewoda, 
 
Thanks for contacting Syncfusion support.  
 
Based on your requirement we have created an Autocomplete AngularJS sample with datasource from datamanager in ASP.NET core app. Please refer to the Code example, sample and online forum for define the select event and datamanager for Angular Autocomplete in ASP.NET core.  
 
 
Code example:  
  
<html lang="en" ng-app="Autoapp"> 
<body ng-controller="AutoCtrl"> 
    <div class="content-container-fluid"> 
        <div class="row"> 
            <div class="cols-sample-area"> 
                <h3>Autocomplete1</h3> 
                <ej-autocomplete id="searchSlownik" min-character="0" width="100%" watermark-text="searchSlownik" query="ej.Query()" filter-type="@FilterOperatorType.Contains" select="onselect"> 
 
                    <e-datamanager url="Home/GetData" adaptor="UrlAdaptor" offline="false"></e-datamanager> 
                    <e-autocomplete-fields key="Id" text="Subject" /> 
 
                </ej-autocomplete> 
                <br /> 
                <br /> 
                <br /> 
                <h3>Autocomplete2</h3> 
                <input ej-autocomplete id="srch" e-min-character="0" type="text" e-datasource="dataList" e-watermarktext="searchSlownik" e-query="dataquery" e-select="onselect" e-fields-key="Id" e-fields-text="Subject" e-width="100%" /> 
            </div> 
        </div> 
    </div> 
 
    <script> 
        var dataManger = ej.DataManager({ 
            url: "Home/GetData", 
            adaptor: "UrlAdaptor", 
            offline: false 
        }); 
        var query = ej.Query(); 
        angular.module('Autoapp', ['ejangular']) 
        .controller('AutoCtrl', ['$scope', '$timeout', function ($scope, $timeout) { 
            $scope.dataList = dataManger; 
            $scope.dataquery = query; 
            $scope.onselect = function (e) { 
                alert("select is triggered") 
            } 
 
        }]); 
 
        function onselect(e) { 
            alert("select is triggered") 
        } 
    </script> 
</body> 
 
</html>  
  
 
 
  
 
 
Also please find the below UG documentation for more information regarding the Datamanager configuration. 
 
 
 
 Please let us know if you have any queries.     
 
Regards,     
Arun P.     
 


Loader.
Up arrow icon