The following code snippet is designed to run on a SharePoint Web Part page within a Script Editor web part. It executes an AJAX call to retrieve list items from SharePoint and should then populate a form with the fetched items. However, no action seems to be taking place as expected.
<link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<h2>Questionnaire:</h2>
<br />
<div ng-app="App">
<div ng-controller="spListCtrl">
<table width="100%" cellpadding="10" cellspacing="2" class="employee-table">
<tr ng-repeat="control in Controls">
<td>{{control.Title}}</td>
<td>
<input type="radio" name="{{control.Id}}" value="Yes">Yes
<input type="radio" name="{{control.Id}}" value="No">No
</td>
<td>
<textarea id="{{control.Id}}Comment"></textarea>
</td>
</tr>
</table>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script>
function getDataWithCaml(listName, caml) {
var endpoint = "https://myteamsite.sharepoint.com/_api/web/lists/GetByTitle('" + listName + "')/GetItems(query=@v1)?@v1={\"ViewXml\":\"'" + caml + "'\"}";
return jQuery.ajax({
url: endpoint,
method: "POST",
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose"
}
});
}
var App = angular.module('App', ['ngRoute'])
.controller('spListCtrl', function ($scope, $http) {
var caml = "<View><Query><Where><Contains><FieldRef Name='Title' /><Value Type='Text'>C-04</Value></Contains></Where></Query></View>";
var jsonData = getDataWithCaml("Controls", caml);
jsonData.success(function (data) {
alert('success');
$scope.Controls = data.d.results;
});
});
</script>