Post
Ask Question

Get SharePoint List Item And Apply Search Filter Using AngularJS

Step 1

Create a custom list in SharePoint. In my case, it is "Product Sales".


Step 2

Create custom JS for getting SharePoint list items using Angular JS (Ex - angularGet.js)  
  1. var spApp = angular.module("spApp", []).controller("viewItemController", function($scope, $http) {  
  2.     var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Product%20Sales')/items";  
  3.     $http({  
  4.         method: "GET",  
  5.         url: url,  
  6.         headers: {  
  7.             "accept": "application/json;odata=verbose"  
  8.         }  
  9.     }).success(function(data, status, headers, config) {  
  10.         var dataResults = data.d.results;  
  11.         $scope.contacts = dataResults;  
  12.     }).error(function(data, status, headers, config) {});  
  13. })   
Step 3

Upload JavaScript file into any library, such as - SiteAssets .

Step 4

Create HTML file and create custom design with the below sample process.
  1. <html>  
  2.   
  3. <head>  
  4.     <script type="text/javascript" src="/SiteAssets/jquery-3.0.0.min.js"></script>  
  5.     <script type="text/javascript" src="/SiteAssets/angular.min.js"></script>  
  6.     <script type="text/javascript" src="/SiteAssets/angularGet.js"></script>  
  7. </head>  
  8.   
  9. <body>  
  10.     <h3>View Contacts</h3>  
  11.     <hr/>  
  12.     <div ng-app="spApp">  
  13.         <div ng-controller="viewItemController"> Search Items:<input type="text" placeholder="searchItems" ng-model="searchText" />  
  14.             <table>  
  15.                 <tr>  
  16.                     <th>Product</th>  
  17.                     <th>Total Sales</th>  
  18.                     <th>Sales Target</th>  
  19.                 </tr>  
  20.                 <tr ng-repeat="contact in contacts|filter:searchText">  
  21.                     <td>{{contact.Product}}</td>  
  22.                     <td>{{contact.Total_x0020_Sales}}</td>  
  23.                     <td>{{contact.Sales_x0020_Target}}</td>  
  24.                 </tr> <br /> </table>  
  25.         </div>  
  26.         <hr /> </body>  
  27.   
  28. </html>  
Step 5

After completion of this file and uploading it to any library (in my case SiteAssets), create one custom page in SharePoint from site pages and insert content editor web part. Edit the properties link in your .html file and click OK.
 
Then, we can get the below structure.

 
 
Step 6

Now, we can search any keyword from Text box. We can get search result items dynamically.

 
Step 7

Finally, we can get the SharePoint item from list with search items using AngularJS.
 
Note

If anything is required from my side, please comment.