Filtering & Sorting using SharePoint online List with Angular JS & Rest API

Advertisement
In this article we can learn how to do Filtering & Sorting in SharePoint List with Angular JS & Rest API
In a page added the script editor and place the below code.
<style>
        th {
            background-color: blue;
            color: white;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

    <script>

    var myAngApp = angular.module('SharePointAngApp', []);
    myAngApp.controller('spCustomerController', function ($scope, $http) {
        $http({
            method: 'GET',
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('InfoList')/items?$select=Title,Employee,Company",
            headers: { "Accept": "application/json;odata=verbose" }
        }).success(function (data, status, headers, config) {
            $scope.customers = data.d.results;
$scope.mySortFunction = function(customer) {//Sorting Iteam
                                    if(isNaN(customer[$scope.sortExpression]))
                                                return customer[$scope.sortExpression];
                                    return parseInt(customer[$scope.sortExpression]);
                        }
        }).error(function (data, status, headers, config) {

        });

    });

    </script>

    <h1> Filtering and sorting in SharePoint List using AngularJS-REST-API !!</h1>
    <br /><br />
    <div ng-app="SharePointAngApp" class="row">
        <div ng-controller="spCustomerController" class="span10">
            <div>
                Sort by:
                <select ng-model="sortExpression">
                    <option value="Title">Title</option>
                    <option value="Employee">Employee</option>
                    <option value="Company">Company</option>
                </select>
            </div>

            <br />
            Search By Any:
            <input type="text" ng-model="search.$" />
            <br />
            <br />
            <table class="table table-condensed table-hover">
                <tr>
                    <th>Title</th>
                    <th>Employee</th>
                    <th>Company</th>

                </tr>
                <tr ng-repeat="customer in customers  | orderBy:mySortFunction | filter:search">
                    <td>{{customer.Title}}</td>
                    <td>{{customer.Employee}}</td>
                    <td>{{customer.Company}}</td>
                </tr>
            </table>
        </div>
    </div>  


Advertisements
SHARE

Lakshmi Tulasi Jasti

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment

2 comments:

  1. Thanks for the solution. When I click the search text box it refreshes. Please do you have any solution To this

    ReplyDelete
  2. Best Selection of Dashiki Shirts and Pants.We are retail and wholesale of dashiki shirts. dashiki skirt

    ReplyDelete