CODEWITHSUNDEEP
angularjssmart-table
vigneshgiri
vigneshgiri

Reputation: 11

Creating a widget in AngularJS and using smart-table

As an academic project, I am expected to create an AngularJS 'widget' that can display, create, and edit notes of many types. I am new to AngularJS. After a few days of searching the internet for topics like AngularJS widgets, custom directives, and smart-tables, I am left more confused and still unsure about how to begin this project. My question is two-part: 1. How can I create this 'note-taking' module (widget?) so that it can later be embedded in a larger application? Is custom directives the way to start? 2. I have tried to create a sample smart-table like this (see below) but despite including smart-table.js, 'st-table' is still shown as an 'unknown attribute'. Here is my code for the sample smart-table:

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>

Thanks.

Upvotes: 1

Views: 816

Answers (1)

ronapelbaum
ronapelbaum

Reputation: 1807

In order to add notes, you will probably need a form:

<form>
    Note ID: <input type="text" ng-model="newNote.NoteID"/>
    .....
    <input type="submit" ng-click="addNote(newNote)" value="Add Note" />
</form>

and in your controller:

function addNote(note) {
    notes.push(note);
};

http://codepen.io/ronapelbaum/pen/QNLGrE

Upvotes: 1

Related Questions