Angular SharePoint 2016自定义列表显示数据

时间:2018-07-10 06:35:30

标签: angular sharepoint

我试图借助CEWP将SharePoint 2016(原始)自定义列表项数据显示到Webpart页面中。 1)我创建了一个自定义列表名称“ AngularDisplay”,默认列为“ Title” 2)通过url“ / _api / web / lists / getByTitle('AngularDisplay')/ items?$ select = Title”检查JSON数据呈现 3)在CEWP上复制了以下代码

{
<html>
<title>Display Operation ByAJS</title> 
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js" type="text/javascript"></script> 
<script>
var app = angular.module('myApp', []);
app.controller('DisplayCtrl',function($scope,$http) {
$http({
        method: 'GET',
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('AngularDisplay')/items?$select=Title",
        headers: { "Accept": "application/json;odata=verbose" }
      }).then(function onSuccess(response) {
         var data = response.data;
         $scope.DisplayListData = data.d.results;
         }).catch(function onError(response) {
            alert("Error occured during data fetch");
           }); 
});
</script> 
</head>
<body ng-app="myApp">
<div ng-controller="DisplayCtrl"> 
   <table> 
      <tbody>
         <tr> 
            <th>ID</th> 
          </tr> 
         <tr ng-repeat="customer in DisplayListData"> 
            <td>{{customer.Title}}</td> 
          </tr> 
      </tbody>
   </table> 
</div> 
</body>
</html>

}

我在这里错过了一些东西吗?请提出建议。

Fire bug仅提供2条警告:

[不建议使用]'window.webkitStorageInfo'。请改用“ navigator.webkitTemporaryStorage”或“ navigator.webkitPersistentStorage”。 AsyncDeltaManager $ _retrieveDelta @ start.js?rev = TAG0:1

[不推荐使用]在非安全上下文中不建议使用应用程序缓存,它将在2018年9月左右在M69中仅限于安全上下文。请考虑将您的应用程序迁移到HTTPS,并最终转移到Service Workers。

enter image description here

请通过creativemonktimepass@gmail.com ping我

1 个答案:

答案 0 :(得分:0)

我发现您正在body标签内使用ng-app标签,而该标签已被省略。因此您需要在父div内添加ng-app标签,如下所示:

带有输出的代码: enter image description here

enter image description here