Я пытаюсь использовать AngularJS средство выбора диапазона для фильтрации данных на основе диапазона дат. Я не могу понять, почему я получаю TypeError "Не удается прочитать свойство 'startDate' из неопределенного. В верхней части контроллера angularjs я определяю объект даты со свойством startDate. Но я все еще получаю эту ошибку Это проблема с SharePoint? Как я могу исправить это, чтобы работать в SharePoint. Код прекрасно работает в стеке LAMP с локальным файлом json, но не на SP. Я пытаюсь запустить на SP 2016. Спасибо.
Вот как я ввожу все зависимости в начало файла html.
<head>
<title>Rolling Log</title>
<meta charset="uft-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/daterangepicker.css" />
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.js"></script>
<!-- <script src="js/angular-route.js"></script> -->
<script src="js/moment.js"></script>
<script src="js/daterangepicker.js"></script>
<script src="js/angular-daterangepicker.js"></script>
</head>
Это тело файла html:
<body ng-app="myApp" ng-controller="myController" ng-clock>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
...
</nav>
<div class="wrapper">
<div><h1>CM Rolling Log</h1></div>
<div id="top">
<hr>
<span style="float: right; padding: 2px;">Search: <input type="text" ng-model="searchText"></span>
<label class="my-auto mr-2">Date Opened:</label>
<input date-range-picker class="form-control" ng-model="datePicker.date" clearable="true" style="max-width: 280px;">
<table>
<tr>
<th ng-click="sortBy('timestamp')" width="10%">Date Time</th>
<th ng-click="sortBy('Action')" width="70%">Action</th>
<th ng-click="sortBy('AO')" width="15%">AO</th>
</tr>
<tr ng-repeat="item in log | orderBy:sortField:reverseOrder | filter:searchText | myfilter: datePicker.date">
<td>{{item.timestamp | date: 'MM/dd/yyyy HH:MM'}}</td>
<td>{{item.Action | removeHTMLTags | strip }}</td>
<td>{{item.AO}}</td>
</tr>
</table>
</div>
<div id="bottom">
<form action="" method="POST" ng-submit="createFunc()">
<br /><span id="user"></span> <br /> <br />
Comment: <br /> <textarea id="action" rows="5" cols="130" name="comment"></textarea> <br /><br />
<input type="submit" name="submit_btn" value="Post comment">
</form>
</div>
</div>
Код angularjs с примененным средством выбора диапазона дат находится внизу.
var app = angular.module('myApp', ['daterangepicker']);
app.filter('removeHTMLTags', function() {
return function(text) {
return text ? String(text).replace(/<[^>]+/gm, '') : '';
}
});
app.controller('myController',
function($scope, $http) {
$http({
method: 'GET',
url: "https://.../_api/web/lists/GetByTitle('RollingLog')/items?$top=1000&$select=timestamp,Action,AO",
headers: {"Accept": "application/json;odata=verbose"}
}).then(function (data, status, headers, config) {
$scope.log = data.data.d.results;
$scope.datePicker = { date: {
startDate: null, endDate: null
} };
$scope.searchText = "";
$scope.reverseOrder = true;
$scope.sortField = "timestamp";
$scope.sortBy = function(sortField) {
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
};
jQuery.ajax({
url: "https://.../_api/web/currentuser?$select=Title",
type: "GET",
headers: {"Accept": "application/json;odata=verbose","Content-Type": "application/json;odata=verbose"},
success: function(data) {
username = data.d.Title;
console.log("user name: " + username);
document.getElementById("user").innerHTML = username;
},
error: function(data) {
console.log("Error occurred trying to get user id");
}
});
}, function errorCallback(response) {
});
$scope.getFormDigest = function() {
console.log("Inside getFormDigest");
var formdigest;
jQuery.ajax({
url: "https://.../_api/contextinfo",
type: "POST",
async: false,
headers: {
"accept": "application/json;odata=verbose",
type: "POST"
},
success: function(data)
{
console.log(typeof data);
formdigest = data.d.GetContextWebInformation.FormDigestValue
}
});
return formdigest;
};
$scope.createFunc = function() {
console.log("Inside createFunc...");
var dt = new Date();
var action = document.getElementById("action").value;
var formdigest = $scope.getFormDigest();
jQuery.ajax({
url: "https://.../_api/web/lists/GetByTitle('RollingLog')/items",
method: "POST",
data: JSON.stringify({
'__metadata' : {'type': 'SP.Data.RollingLogListItem'},
'Action': action,
'AO': username,
'timestamp': dt
}),
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": formdigest
},
success: function(data) {
console.log("entry created successfully...");
},
error: function(data) {
console.log(("#__REQUESTDIGEST").val());
console.log("Error message: " + JSON.stringify(data.responseJSON.error));
}
});
};
}
).filter('strip', function() {
return function(str) {
return str.replace(/>/g, '').replace(/ /g, ' ').replace(/>/g, '').replace(/>>/g, '').replace(/;/g, '').replace(/#/g, '"').replace(/"/g,'"');
}
});
app.filter("myfilter", function() {
return function(items, date) {
if (!date.startDate || !date.endDate) {
return items
}
startDate = moment(date.startDate);
endDate = moment(date.endDate);
return items.filter(function(elem) {
var openedDate = moment(elem.date_opened);
return startDate.diff(openedDate, 'days') <= 0 && endDate.diff(openedDate, 'days') >= 0;
});
};
});