I was able to create a form using angular using the below code.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  
    window.onload = function () {
    function ContactsCtrl($scope) {

        $scope.contact = { firstName: "", lastName: "", Location: "", Departmant: "" };
        $scope.addContact = function ($event) {
            var x = $scope.contact;

            if (x.Departmant == "HR") {
                alert('pease select IT');
            else {

                var clientContext = new SP.ClientContext.get_current();
                var web = clientContext.get_web();
                var list = web.get_lists().getByTitle('Contact Details');

                // create the ListItemInformational object  
                var listItemInfo = new SP.ListItemCreationInformation();
                // add the item to the list  
                var listItem = list.addItem(listItemInfo);
                // Assign Values for fields  
                listItem.set_item('Title', x.firstName);
                listItem.set_item('firstName', x.firstName);
                listItem.set_item('lastName', x.lastName);
                listItem.set_item('fullName', x.firstName + " " + x.lastName);
                listItem.set_item('Location', x.Location);
                listItem.set_item('Departmant', x.Departmant);


                    Function.createDelegate(this, onQuerySucceeded),
                    Function.createDelegate(this, onQueryFailed)

        onQuerySucceeded = function () {
            alert('Successfully updated the contact');

        onQueryFailed = function (sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());

Can someone suggest a way to load a list item using ID onpage load using angular JS?

  • Can you elaborate more. From where you are passing ID to retrieve list items? Commented Nov 6, 2017 at 9:02
  • You can directly call a function within controller so that it will be called automatically whenever controller is triggered.... Commented Nov 6, 2017 at 9:21
  • i want to sent an email to the users with a link to the item. When the link is clicked i want it to open this page loading the details of the item.
    – Rinu
    Commented Nov 6, 2017 at 10:21

2 Answers 2


Refer below code sample. This will guide you. Here we are calling a function as soon as controller triggers to show data in a grid format. Here we are calling function getSongs() on controller trigger.

app.controller("ListController", ["$scope", "$location", "ListFactory", function($scope, $location, ListFactory) {

    ListFactory.getSongs().then(getSongsSuccess, getSongsFailed); // this function will be called when `ListController` controller will be triggered.

    function getSongsSuccess(data) {
        if (data.data.d.results.length > 0) {
            $scope.listItems = data.data.d.results;
        } else {
            // empty response from server

    function getSongsFailed(error) {

    $scope.redirectToEditRoute = function(item) {
        $location.path("/Edit/" + item.Id);


View (HTML Template): This is the HTML code that I am using to generate a table structure. Refer this HTML snippet :


    <div class="table-responsive col-md-6">
        <input type="text" ng-model="search" placeholder="Filter Song Here" class="form-control">
        <table class="table table-condensed table-striped table-bordered table-hover no-margin">
                    <th style="width:7%">ID</th>
                    <th style="width:55%" class="hidden-phone">Title</th>
                    <th style="width:20%" class="hidden-phone">Artist</th>
                    <th style="width:10%" class="hidden-phone">Artist</th>
                    <th style="width:8%" class="hidden-phone">Actions</th>

                <tr ng-repeat="item in listItems | filter:search">
                        <button type="button" ng-click="playSong(this)" class="btn btn-warning">Play Song</button>
                        <div class="btn-group">
                            <button data-toggle="dropdown" class="btn btn-xs dropdown-toggle" data-original-title="" title="">
                                <span class="caret"></span>
                            <ul class="dropdown-menu pull-right">
                                    <a href ng-click="redirectToEditRoute(item)">Edit</a>
                                    <a href ng-click="deleteSong(item)">Delete</a>

    <youtube-video video-id="videoId"></youtube-video>
  • can you update with full code including the HTML?
    – Rinu
    Commented Nov 8, 2017 at 5:41
  • @Rinu I have updated the answer. And added HTML as well. Have a look at it..... Commented Nov 8, 2017 at 9:02

There are multiple ways to fetch item by itemId,

  1. REST API (ref)

_api/web/lists/GetByTitle('Test')/items(item id)

  1. JSOM (ref)

var targetList = clientContext.get_web().get_lists().getByTitle('Announcements');

targetListItem = targetList.getItemById(itemId);

clientContext.load(targetListItem, 'Title');

And to create link, you can pass Item Id as query string.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.