Search This Blog

Wednesday, February 7, 2018

SharePoint with AngularJS Simple Example


<html>

<head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

    <script>
        var spApp = angular.module("spApp", []).controller("viewItemController", function ($scope, $http) {
            var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('testList')/items";
            $http({
                method: 'GET',
                url: url,
            }).then(function (data) {
                var dataResults = data.data.value;
                $scope.contacts = dataResults;
            }, function (error) {

            });          
        })
    </script>
</head>

<body>
    <h3>View Contacts</h3>
    <hr />
    <div ng-app="spApp">
        <div ng-controller="viewItemController">
           Search Items:<input type="text" placeholder="searchItems" ng-model="searchText" />
            <table>
                <tr>
                    <th>Product</th>
                    <th>Product No</th>
                </tr>
                <tr ng-repeat="contact in contacts|filter:searchText">
                    <td>{{contact.Title}}</td>
                    <td>{{contact.Number}}</td>
                </tr>
                <br />
            </table>
        </div>
        <hr />
    </div>
</body>

</html>

No comments:

Post a Comment