Hi,
I am trying to use Angular JS to bind a dropdown from SharePoint custom list.
I have tried the below code:
// visual webpart
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="/_layouts/Test/FillData.js" type="text/javascript"></script>
<SharePoint:FormDigest ID="FormDigest1" runat="server">
</SharePoint:FormDigest>
<div ng-app="mainApp" ng-controller="mainController">
<form novalidate >
<select ng-model="ddlTowers" ng-options="Tower.Name for Tower in Towers track by Tower.Id" required>
<option value="">Select</option>
</select>
//FillData.js
var app = angular.module('mainApp', []);
app.controller('mainController', function ($scope) {
ExecuteOrDelayUntilScriptLoaded(GetData, "sp.js");
$scope.Towers = null;
$scope.Towers.items = [];
function GetData() {
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
clientContext.load(web);
var list = web.get_lists().getByTitle('Towers');
var query = SP.CamlQuery.createAllItemsQuery();
var listitems = list.getItems(query);
clientContext.load(listitems, "Include(Title)");
clientContext.executeQueryAsync(OnSucceeded, onFailed);
function OnSucceeded() {
$scope.$apply(function () {
var itemsCount = listitems.get_count();
for (i = 0; i < itemsCount; i++) {
var listitem = listitems.itemAt(i);
$scope.Towers.items.push({ "title": listitem.get_fieldValues().Title });
}
});
}
function onFailed(sender, args) {
alert('Error');
}
}
});
I am getting error as "Angular is undefined." The control is going to filldata.js file and is breaking in the first line itself.
How to fix this?
Thanks