Loading the list item details using angular js.

Hi all,

I am new to angular JS and was able to create a form to submit the data to the list . Using the below code.

"//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">

i would know if there is a way to show an item details from the list to an angular js form just like above?.

The senario is that A sharepoint designer workflow email is to be sent to the users who will then click on the link to access see or edit the list item. How do i do that?

Step1:Get the list items using angular and REST api call as shown below

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Your List Name')/items",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose"
},
success: function(data) {
$scope.MyListItems= data.d.results;
},
error: function(error) {
alert(JSON.stringify(error));
}
});
});

from the above code you will get list items and stored in an object that "$scope.MyListItems"

Step2:

show them in your HTML. Let me display the list items in a table for an example, as below:

"MyCtrl">
"0" cellpadding="0">
Title
firstName
lastName
fullName
Location
Departmant
"item in MyListItems">
{{ item.Title }}
{{ item.firstName }}
{{ item.lastName }}
{{ item.fullName }}
{{ item.Location }}
{{ item.Departmant }}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Mahipal Reddy8y ago
Step1:Get the list items using angular and REST api call as shown below
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Your List Name')/items",
type: "GET",
headers: {
"accept": "application/json;odata=verbose",
"content-Type": "application/json;odata=verbose"
},
success: function(data) {
$scope.MyListItems= data.d.results;
},
error: function(error) {
alert(JSON.stringify(error));
}
});
});
from the above code you will get list items and stored in an object that "$scope.MyListItems"

Step2:

show them in your HTML. Let me display the list items in a table for an example, as below:
"MyCtrl">
"0" cellpadding="0">



Title
firstName
lastName
fullName
Location
Departmant

"item in MyListItems">

{{ item.Title }}


{{ item.firstName }}


{{ item.lastName }}


{{ item.fullName }}


{{ item.Location }}


{{ item.Departmant }}