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? Nov 6 '17 at 9:02
  • You can directly call a function within controller so that it will be called automatically whenever controller is triggered.... Nov 6 '17 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
    Nov 6 '17 at 10:21

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
    Nov 8 '17 at 5:41
  • @Rinu I have updated the answer. And added HTML as well. Have a look at it..... Nov 8 '17 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, privacy policy and cookie policy

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