I am trying to add a datagrid to my Angular application. Here is relevant code:
main page
<!-- jQuery references -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<!-- EasyUI references -->
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
view:
<head>
<title>Angular with JQuery EasyUI</title>
<style type="text/css">
#ff label{
display:block;
width:100px;
}
</style>
</head>
<body>
<div style="padding:3px 2px;border-bottom:1px solid #ccc">Compose Email</div>
<form id="ff" method="post">
<div>
<label for="name">Name:</label>
<input class="easyui-validatebox" ng-model="name" type="text" name="name" required="true">
</div>
<div>
<label for="email">Email:</label>
<input class="easyui-validatebox" ng-model="email" type="text" name="email" required="true" validType="email">
</div>
<div>
<label for="subject">Subject:</label>
<input class="easyui-validatebox" ng-model="subject" type="text" name="subject" required="true">
</div>
<div>
<label for="message">Message:</label>
<textarea name="message" ng-model="message" style="height:60px;"></textarea>
</div>
<div>
<input type="button" value="Send" ng-click="sendEmail()">
</div>
</form>
<br>
<hr>
<div style="padding:3px 2px;border-bottom:1px solid #ccc">Email history</div>
<br>
<div id="patient_table">
<table id="emailhistory" class="easyui-datagrid" data-options="singleSelect:true,collapsible:true,data:{{tableItems}}" style="width:560px;height:400px">
<thead>
<tr>
<th data-options="field:'name',width:'120'">Name</th>
<th data-options="field:'email',width:'120'">Email</th>
<th data-options="field:'subject',width:'120'">Subject</th>
<th data-options="field:'message',width:'200',resizable:true">Message</th>
</tr>
</thead>
</table>
</div>
</body>
Controller
$scope.name = "Sam";
$scope.email = "sam@gmail.com";
$scope.subject = "Vacations pics from India";
$scope.message = "Hi, I'll be uploading my vacations pics from India on my dropbox for you all.";
$scope.tableItems = [
{
"name": "Mike",
"email": "mike@gmail.com",
"subject": "Weekly reports mailed",
"message": "Hi Mike, I have send you the weekly reports by mail. They'll be arriving soon."
}];
$scope.sendEmail = function () {
$scope.tableItems.push({ "name": $scope.name, "email": $scope.email, "subject": $scope.subject, "message": $scope.message });
$('#emailhistory').datagrid('loadData', $scope.tableItems);
};
First of all when I run it table "emailhistory" does not look right. See attached.
When I click on send Email I have an error in the Console:
TypeError: Unable to get property 'options' of undefined or null reference
at _643 (
http://www.jeasyui.com/easyui/jquery.easyui.min.js:9204:1)
at Anonymous function (
http://www.jeasyui.com/easyui/jquery.easyui.min.js:10096:1)
Please help.
Thanks
Show Posts
