在AngularJS中创建一个小部件并使用智能表
问题描述:
作为一个学术项目,我期望创建一个可以显示,创建和编辑多种类型笔记的AngularJS '小部件'。 我是AngularJS的新手。经过几天的搜索互联网的主题像AngularJS 部件,自定义指令和智能表,我很困惑,仍然不确定如何开始这个项目。 我的问题是两部分:1。 如何建立这个“笔记”模块(?控件),这样以后就可以嵌入在一个较大的应用程序?是定制指令开始呢? 2.我试图创建一个示例智能表这样的(见下文),但尽管包括智能table.js,'st-table'
仍显示为一个“未知属性”。 这里是我的样品智能表代码:在AngularJS中创建一个小部件并使用智能表
var app = angular.module('myApp', ['smart-table']);
//The controller with the notes data.
app.controller('notesController', function ($scope) {
$scope.notes = [
{
"NoteID": "TL001",
"NoteType": "TL",
"NoteCreator": "XYZ",
"NoteCreationTime": "12/12/2015 12:32:52",
"NoteDescription": "Here is some sample description for this sample note.",
},
{
"NoteID": "SL001",
"NoteType": "SL",
"NoteCreator": "ABC",
"NoteCreationTime": "12/12/2015 12:32:52",
"NoteDescription": "Here is some sample description for this sample note.",
},
{
"NoteID": "OL002",
"NoteType": "OL",
"NoteCreator": "MNO",
"NoteCreationTime": "1/7/2015 11:01:50",
"NoteDescription": "Here is some sample description for this sample note.",
},
];
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Really Simple Table</title>
<script src="../Scripts/angular.js"></script>
<script src="smart-table.js"></script>
<script src="ReallySimpleTable.js"></script>
</head>
<body>
<div ng-controller="notesController">
<table st-table="notes" class="table table-striped">
<th>Note ID</th>
<th>Note Type</th>
<th>Note Creator</th>
<th>Note Creation Time</th>
<th>Note Description</th>
<tr ng-repeat="note in notes">
<td> {{ note.NoteID }} </td>
<td> {{ note.NoteType }} </td>
<td> {{ note.NoteCreator }} </td>
<td> {{ note.NoteCreationTime }} </td>
<td> {{ note.NoteDescription }} </td>
</tr>
</table>
</div>
</body>
</html>
感谢。
答
为了添加注释,你可能需要一个形式:
<form>
Note ID: <input type="text" ng-model="newNote.NoteID"/>
.....
<input type="submit" ng-click="addNote(newNote)" value="Add Note" />
</form>
和控制器:
function addNote(note) {
notes.push(note);
};