This post will explain you about how to add/Delete List. I have added some validation rules which may help you setup in HTML page using "required" tag of AngularJS
Service:
this.AddList = function (listName) {
var item =JSON.stringify({
"__metadata": { "type": "SP.List" },
"AllowContentTypes": "true",
"BaseTemplate": "104",
"ContentTypesEnabled": "true",
"Description": "List created by AngularJS service call",
"Title": listName
});
var config = {
headers: {
"Content-Type": "application/json;odata=verbose",
"ACCEPT": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
}
};
return $http.post(siteUrl + "/_api/web/lists", item, config);
};
this.GetListByName = function (listName) {
var config = {
headers: {
"ACCEPT": "application/json;odata=verbose"
}
};
return $http.get(siteUrl + "/_api/web/lists?$filter=Title eq '" + listName+"'", config);
};
this.DeleteList = function (data) {
var config = {
contentType: "application/json;odata=verbose",
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "DELETE",
"If-Match": data.__metadata.etag
}
};
return $http.post(data.__metadata.uri, null, config);
};
Controller:
$scope.AddList = function () {
ListService.AddList($scope.listName)
.success(function () {
alert("list created");
$scope.$broadcast("RefillList");
})
.error(function () {
alert("fail to add list");
});
};
$scope.DeleteList = function () {
ListService.GetListByName($scope.listName)
.success(function (data) {
var result = data.d.results[0];
ListService.DeleteList(result)
.success(function () {
alert("list deleted");
$scope.$broadcast("RefillList");
})
.error(function () {
alert("failed to delete list");
});
})
.error(function () {
alert("error");
});
};
$scope.$on('RefillList', function () {
ListService.GetLists()
.success(function (data) {
var results = data["d"]["results"];
$scope.lists = results;
})
.error(function () {
alert("error while getting items");
});
});
HTML:
<ng-form name="listForm">
<div> Total List</div>
<input ng-model="listName" name="listName" required placeholder="List Name" />
<span class="error" ng-show="listForm.listName.$error.required">Required!</span>
<input type="button" ng-click="AddList()" value="Add List" ng-disabled="!listForm.$valid" />
<input type="button" ng-click="GetLists()" value="GetLists" />
<input type="button" ng-click="DeleteList()" value="DeleteList" ng-disabled="!listForm.$valid"/>
<ul>
<li ng-repeat="list in lists">
<a ng-click="GetListItems(list.Title)">{{list.Title}}</a>
</li>
</ul>
<ul>
<li ng-repeat="listItem in listItems">
<a ng-click="GetListItemsById(listItem.Id,listItem.Title)">{{listItem.Title}}</a>
</li>
</ul>
</ng-form>
<ng-form name="itemForm">
<input ng-model="listName" name="listName" placeholder="List Name" required />
<span class="error" ng-show="itemForm.itemForm.$error.required"></span>
<input ng-model="itemId" name="itemId" ng-readonly="true" placeholder="Id" />
<input ng-model="iTitle" placeholder="Title" required name="iTitle" />
<input type="button" ng-click="AddListItem()" value="AddListItem" ng-disabled="!itemForm.$valid" />
<input type="button" ng-click="UpdateListItem()" value="UpdateListItem" ng-disabled="!itemForm.$valid" />
<input type="button" ng-click="DeleteListItem()" value="DeleteListItem" ng-disabled="!itemForm.$valid" />
</ng-form>
<div ng-hide="true">
{{jsonData}}
</div>
<div ng-hide="true">
{{listItemJSON}}
</div>
