How to get the list item in angular js?

Question

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>  
<script>
    window.onload = function () {
        alert('page');
    };
    function ContactsCtrl($scope) {

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

            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);

                listItem.update();

                clientContext.executeQueryAsync(
                    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());
        }
    }
</script>  

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

Answer 1

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) {
        debugger;
    }

    $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>

    <div class="table-responsive col-md-6">
        <input type="text" ng-model="search" placeholder="Filter Song Here" class="form-control">
        <br>
        <table class="table table-condensed table-striped table-bordered table-hover no-margin">
            <thead>
                <tr>
                    <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>
            </thead>

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

            </tbody>
        </table>
    </div>
    <youtube-video video-id="videoId"></youtube-video>
</div>

Answer 2

There are multiple ways to fetch item by itemId,

1. REST API (ref)

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

2. 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.