ANGULARJS implementation of front-end additions and deletions, state nesting cases

The case of this article is roughly: the left-hand side has a navigation menu, a list is displayed to the right, and a list item can be edited or deleted, or a new list item can be added. By this, can realize: How to organize extensible ANGUALRJS file structure, how to click on the left side menu item to display corresponding content, angular-ui-router use as well as nesting state, delete, change, etc.

Roughly as follows:



When you click the Add button:

When you click the Update button:

File Structure








node_modules/


src/


... app/


... the categories/.


... categories.js < contains a module> named categories.,, A..


... categories.tmpl.html < navigation menu on the left side of the map >


... bookmarks/......


... bookmark.js < contains a module> with a name called Categories.bookmarks, which is known as a.


... bookmarks.tmpl.html < right side of list items > on the other hand, and the.


... create/..--------


... the Bookmark-create.js < contains a module> named Categories.bookmarks.create, which has a name of the same title as the "."


... bookmark-create.tmpl.html < add a form > to A. ......-----.


... edit/..--------


... bookmark-edit.js < contains a name known as categories.bookmarks.edit>, and it is not a ........


... bookmark-edit.tmpl.html < update the form > in the same order as the other ...., .....


... the common/.


... models/......


... bookmarks-model.js < contains a module> with a name called Darren.models.bookmarks, which is known as a.


... categoires-model.js < contains a module> with a name called Darren.models.categories, which is known as a.


... app.js < contains a module> with a name called Darren.


... asserts/


... the css/.


... animation.css < animation effects for transitions between state corresponding views >, A., ...


... darren.css < project css>------


... normalize.css......


... the img/.


... logo.png......


... data/


... Bookmarks.json < JSON data on the right list >


... Categories.json < left-side menu JSON data >


... vendor/


... the angular-ui-router.min.js.


... the lodash.min.js.


Index.html








Modules





The interdependence between modules is shown in the figure:

Pierced, all of the module are associated with the main module named Darren.





index.html











<! -- referenced CSS -- >
<link rel="stylesheet" href="assets/css/normalize.css"/>
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="assets/css/eggly.css"/>
<link rel="stylesheet" href="assets/css/animations.css"/>
<! -- left menu - >
<div ui-view="categories"></div>
<! -- list on the right -- >
<div ui-view="bookmarks"></div>
<! -- referenced JS -- >
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="vendor/lodash.min.js"></script>
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../node_modules/angular-animate/angular-animate.min.js"></script>
<script src="vendor/angular-ui-router.min.js"></script>
<! -- the order of the following references to JS is basically the same as the dependency between modules -- >
<script src="app/app.js"></script>
<script src="app/categories/categories.js"></script>
<script src="app/categories/bookmarks/bookmark.js"></script>
<script src="app/categories/bookmarks/create/bookmark-create.js"></script>
<script src="app/categories/bookmarks/edit/bookmark-edit.js"></script>
<script src="app/common/models/bookmarks-model.js"></script>
<script src="app/common/models/categories-model.js"></script>
Above, the data of < div UI view = "categories" >.
App.js
The main module named Darren is defined here, and an abstract sate is defined in the module for the inheritance and nesting of state.
angular.module('Darren', ['ngAnimate',
'ui.router',
'categories',
'categories.bookmarks'
)
.config(function($stateProvider, $urlRouterProvider){
//Navigate to home by default
$stateProvider
.state('darren',{
Url: '',
abstract: true
};
$urlRouterProvider.otherwise('/');
}
;
Angularjs implements front-end add, delete, modify and query, state nesting cases - angularjs instruction nesting
Now, it's time to go to the specific state and display the data of < div UI view = "categories" > < / div > and < div UI view = "Bookmarks" >.

Data Source








Categories.json











[


{"id": 0, "name": ""},


{"id": 1, "name": ""},


{"id": 2, "name": ""},


{"id": 3, "name": ""}


]








Bookmarks.json





[


{"id": 0, "title": "", "url": "", "category": "},


{"id": 1, "": "," url ":", "category": "},


...


]





The next step is to manipulate the data, and all operations against category and the bookmark are placed in the service.





Categories-model.js








This defines the service for category.








Angular.module (' darren.models.categories ', [])


. Service (' Categoriesmodel ', function ($http, $q) {





var model=this,


urls={


FETCH: ' Data/categories.json '


},


Categories


Currentcategory;





Model.getcategoires = function () {





If categories exists, use $q to return promise


Extract the data if it's not there.


Return (categories)? $q. When (categories): $http. Get (URLS. FETCH). Then (cachecategories);


}





function extract (Result) {


return result.data;


}





function Cachecategories (Result) {


Categories = extract (result);


return categories;


}





Model.getcategorybyname = function (CategoryName) {


var defered = $q. Defer ();





function Findcategory () {


Return _.find (categories, function (c) {


return c.name = = CategoryName;


});


}





if (categories) {


Defered.resolve (Findcategory ());


} else{


Model.getcategoires ()


. then (function (Result) {


Defered.resolve (Findcategory ());


});


}





return defered.promise;


};





Model.setcurrentcategory = function (CategoryName) {


Return Model.getcategorybyname (CategoryName)


. Then (function (category) {


currentcategory = category;


});


};





Model.getcurrentcategory = function () {


return currentcategory;


}





Model.getcurrentcategoryname = function () {


Return currentcategory? Currentcategory.name: ';


};





})


;











Above


The GetCategories method is provided externally





If the categories exists, return promise via $q.when, if categories does not exist, return a $http.get through or then binding promoise.





The Getcategorybyname method is provided externally, according to CategoryName to obtain category





Returns a deferred object via $q.defer, returning promise via Defered.promise. It defines an internal function findcategory, obtains the category through the Lodash Find method, if categories exists, uses the Deferred.reslove current category, If categories does not exist, the GetCategories method is invoked to obtain categories after the Defered.resolve.





The Setcurrentcategory method is provided externally





Assigns the acquired category to a currentcategory variable. This method is called when you click on the left menu item in the interface.





The Getcurrentcategory method is provided externally





Actually returns the value of the variable currentcategory.





Methods of external Getcurrentcategoryname





If the value of the currentcategory variable is null, an empty string is returned, and if not NULL, the Currentcategory Name field value is returned.





Next, is the Servcie for the bookmark.





Bookmarks-model.js








Angular.module (' Darren.models.bookmarks ', [])


. Service (' Bookmarksmodel ', function ($http, $q) {


var model = this,


Bookmarks


url={


FETCH: ' Data/bookmarks.json '


};





Get


Model.getbookmarks = function () {





var deferred = $q. Defer ();





if (bookmarks) {


Deferred.resolve (bookmarks);


} else{


$http. Get (URL. FETCH). Then (function (bookmarks) {


Deferred.resolve (Cachebookmarks (bookmarks));


});


}





return deferred.promise;


}





function extract (Result) {


return result.data;


}





function Cachebookmarks (Result) {


Bookmarks = extract (result);


return bookmarks;


}





Create


Model.createbookmark = function (bookmark) {


Bookmark.id = Bookmarks.length;


Bookmarks.push (bookmark);


}





Find by number


function Findbookmark (bookmarkid) {


Return _.find (bookmarks, function (bookmark) {


return bookmark.id = = parseint (BookmarkID, 10);


});


}





Model.getbookmarkbyid = function (bookmarkid) {


Create Defered Object


var deferred = $q. Defer ();





if (bookmarks) {


Deferred.resolve (Findbookmark (bookmarkid));


} else{


Model.getbookmarks (). Then (function () {


Deferred.resolve (Findbookmark (bookmarkid));


});


}





return deferred.promise;


}





Update


Model.updatebookmark = function (bookmark) {


var index = _.findindex (bookmarks, function (b) {


return b.id = = Bookmark.id;


});





Bookmarks[index] = bookmark;


}





Delete


Model.deletebookmark = function (bookmark) {


_.remove (bookmarks, function (item) {


return item.id = = Bookmark.id;


});


}


})


;








Above





Getbookmarks method for external delivery





is also returned with a promise type of bookmarks.





Provide a CreateBookMark method to accept the bookmark parameters externally





is to assign an ID value to the bookmark and place it in the current bookmarks array.





Provide Getbookmarkbyid method, obtain according to bookmarkid parameter





Return to a Promise bookmark.





External supply Updatebookmark, accept the bookmark form parameter





Gets the index value of the current bookmark in the array using the Lodash FindIndex method, and assigns a new value to the corresponding array element based on the index value.





Provide a Deletebookmark method to accept the bookmark parameters externally





Deletes an array element using the Lodash Remove method.








Well, the data source and the various methods of manipulating data are available, and now the routing, controller, and so on.





Category.js








Remember home &lt;div ui-view= "categories" &gt;&lt;/div&gt; and &lt;div ui-view= "bookmarks" &gt;&lt;/div&gt; the data also working demo? In fact, it is defined here.








Angular.module (' Categories ', [


' Darren.models.categories '


])


. config (function ($stateProvider) {


$stateProvider


. State (' Darren.categories ', {


URL: '/',


Views: {


Target the Ui-view named categories in root


' categories@ ': {


Controller: ' Categoriesctrl as Categorieslistctrl ',


Templateurl: ' app/categories/categories.tmpl.html '


},


Target the ui-view named ' Bookmarks ' in root and all bookmarks for all categories


' bookmarks@ ': {


Controller: ' Bookmarksctrl as Bookmarkslistctrl ',


Templateurl: ' app/categories/bookmarks/bookmarks.tmpl.html '


}


}


});


})


. Controller (' Categoriesctrl ', function Categoriesctrl (Categoriesmodel) {


var Categorieslistctrl = this;





Categoriesmodel.getcategoires ()


. then (function (Result) {


Categorieslistctrl.categories = result;


});





})


;

















Above





Defines a state with a name called Darren.categories.





URL: '/' is the first URL path, and the Views field defines the pairing of two groups of controller and Templateurl. categories@ corresponding to the first view of the &lt;div ui-view= "categories" &gt;&lt;/div&gt;,bookmarks@ corresponding to the first page view &lt;div ui-view= "Bookmarks" &gt;&lt;/div&gt;.





In controller: ' Categoriesctrl as Categorieslistctrl ', Categoriesctrl this controller has an alias, which means that if you invoke Categoriesctrl in the interface, it will use its alias Categorieslistctrl.





Now, the relationship to state is as follows:

When on the first page, that is, the path is/, first through the type of the abstract name called Darren State, and then came to Darren.categories (here the writing format is consistent with the Convention: the next level.) This state, the &lt;div on the page Ui-view = "Categories" &gt;&lt;/div&gt; find the categories@ field here, let Categorieslistctrl be responsible for providing the data for categories.tmpl.html this view.








&lt;div ui-view= "Bookmarks" &gt;&lt;/div&gt; find the bookmarks@ field here, Let Bookmarkslistctrl and bookmarks.tmpl.html pairing, but the problem here is: Bookmarkslistctrl is not in categories this module, in the end is where to find Bookmarkslistctrl?





The controller has been defined and passed the Categores field





The Categoriesmodel service is injected into the controller to obtain data from the service.








categories.tmpl.html








Here is the left menu on the front page.











&lt;ul&gt;


&lt;!--to determine whether the category is selected, the logic is to click on the current category, to save this category in $scope.currentcategory, and then to determine whether the current category and $ Scope.currentcategory is equal, equality is selected. Like very do not disturb the female guest presses the lamp, the system records the current presses the lamp the table number, the system again traverses all table number, if the table number and the System record table number is equal, let the table number's lamp light up, the reason is same drop. --&gt;


&lt;li ng-repeat= "category in Categorieslistctrl.categories" &gt;


&lt;a ui-sref= "Darren.categories.bookmarks ({category:category.name})" &gt;


{{Category.name}}}


&lt;/a&gt;


&lt;/li&gt;


&lt;/ul&gt;











Above, the fun is ui-sref= "Darren.categories.bookmarks ({category:category.name}), which means that when clicked on the left-hand side of a menu item, Pointing to darren.categories.bookmarks this state, and with the parameter category, the category name key value is passed out because the list item on the right-hand side shows which category is clicked.





Darren.categories.bookmarks This state is defined in the bookmark.js.





Bookmark.js








Angular.module (' Categories.bookmarks ', [


' Categories.bookmarks.create ',


' Categories.bookmarks.edit ',


' Darren.models.bookmarks '


])


. config (function ($stateProvider) {


$stateProvider


. State (' Darren.categories.bookmarks ', {


URL: ' Categories/:category ',


Views: {


' bookmarks@ ': {


Templateurl: ' app/categories/bookmarks/bookmarks.tmpl.html ',


Controller: ' Bookmarksctrl as Bookmarkslistctrl '


}


}


});


})





No need to $scope.


. Controller (' Bookmarksctrl ', function ($stateParams, Bookmarksmodel,categoriesmodel) {


var Bookmarkslistctrl = this;





Categoriesmodel.setcurrentcategory ($stateParams. category);





Bookmarksmodel.getbookmarks ()


. then (function (bookmarks) {


Bookmarkslistctrl.bookmarks = bookmarks;


});





Bookmarkslistctrl.getcurrentcategory = categoriesmodel.getcurrentcategory;


Bookmarkslistctrl.getcurrentcategoryname = Categoriesmodel.getcurrentcategoryname;


Bookmarkslistctrl.deletebookmark = Bookmarksmodel.deletebookmark;





})


;





Above, click menu item in categories.tmpl.html (ui-sref= "Darren.categories.bookmarks ({category:category.name})") The category that are passed are corresponding to the categories/:category here.

Specifically, when clicking on the menu item (ui-sref= "Darren.categories.bookmarks ({category:category.name})"), Came to darren.categories.bookmarks this state, and the URL conforms to the categories/:category format, stateparams the category stored in the URL, the first page on the &lt;div ui-view= "Bookmarks" &gt;&lt;/div&gt; found the bookmarks@ field, eventually matching Bookmarkslistctrl and bookmarks.tmpl.html.





In addition, in the Category.js, also mentioned a question: Bookmarkslistctrl is not in categories this module, where exactly is to find Bookmarkslistctrl? The answer is also found here, when there is no Bookmarkslistctrl in the categories module, The matching controller and view of the bookmarks$ will be found in accordance with the entire line of Darren→darren.categores→darren.categores.bookmarks.





bookmarks.tmpl.html





<! -- do not use the writing method of $scope, write the alias of controller -- >
<h1>{{bookmarksListCtrl.getCurrentCategoryName()}}</h1>
<! -- the bookmarks are filtered. The filtering standard is the field category of the bookmark -- >
<div ng-repeat="bookmark in bookmarksListCtrl.bookmarks | filter:{category:bookmarksListCtrl.getCurrentCategoryName()}">
<button type="button" class="close" ng-click="bookmarksListCtrl.deleteBookmark(bookmark)">×</button>
< button type = "button" class = "BTN BTN link" UI Sref = "Darren. Categories. Bookmarks. Edit ({bookmark ID: bookmark. ID})" > Update < / button >
<a href="{{bookmark.url}}" target="_blank">{{bookmark.title}}</a>
</div>
<hr/>
<!-- CREATING -->
<ui-view ng-if="bookmarksListCtrl.getCurrentCategory()">
< button type = "button" UI Sref = "Darren. Categories. Bookmarks. Create" > Add < / button >
</ui-view>





Above





Click the Update button, ui-sref= "Darren.categories.bookmarks.edit ({bookmarkId:bookmark.id})", Came to the state of Darren.categories.bookmarks.edit and took the BookmarkID parameter, which was defined in the bookmark-edit.js.





Click the Add button. Ui-sref= "Darren.categories.bookmarks.create", Come to darren.categories.bookmarks.create this state, this state is defined in the bookmark-create.js.





That is, the content displayed in &lt;ui-view&gt;&lt;/ui-view&gt; may be the content added, or it may be the updated content.





Bookmark-edit.js





Angular.module (' Categories.bookmarks.edit ', [])


. config (function ($stateProvider) {


$stateProvider


. State (' Darren.categories.bookmarks.edit ', {


URL: '/bookmarks/:bookmarkid/edit ',


Templateurl: ' app/categories/bookmarks/edit/bookmark-edit.tmpl.html ',


Controller: ' Editbookmarkctrl as Editbookmarkctrl '


});


})


. Controller (' Editbookmarkctrl ', function ($state, $stateParams, Bookmarksmodel) {


var Editbookmarkctrl = this;





Update successful or Cancel update


function Returntobookmarks () {


$state. Go (' Darren.categories.bookmarks ', {


Category: $stateParams. Category


});


}





function cancelediting () {


Returntobookmarks ();


}





Editbookmarkctrl.bookmark


Editbookmarkctrl.editedbookmark


Bookmarksmodel.getbookmarkbyid ($stateParams. BookmarkID)


. then (function (bookmark) {


if (bookmark) {


Editbookmarkctrl.bookmark = bookmark;


Editbookmarkctrl.editedbookmark = Angular.copy (Editbookmarkctrl.bookmark);


} else {


Returntobookmarks ();


}


});





Update


function Updatebookmark () {


Editbookmarkctrl.bookmark = Angular.copy (Editbookmarkctrl.editedbookmark);


Bookmarksmodel.updatebookmark (Editbookmarkctrl.bookmark);


Returntobookmarks ();


}





editbookmarkctrl.cancelediting = cancelediting;


Editbookmarkctrl.updatebookmark = Updatebookmark;


})


;








Above, click the Update button, ui-sref= "Darren.categories.bookmarks.edit ({bookmarkId:bookmark.id})" In the BookmarkID is URL: '/bookmarks/: Bookmarkid/edit ' Accept. The relationship between state now becomes this:

Specifically, click on the Update button, ui-sref= "Darren.categories.bookmarks.edit ({bookmarkId:bookmark.id})" Came to darren.categories.bookmarks.edit this state, where the BookmarkID was $ Stateparams.bookmarkid accepted, paired Editbookmarkctrl and bookmark-edit.tmpl.html, The contents of bookmark-edit.tmpl.html are shown in &lt;ui-view&gt;&lt;/ui-view&gt; in bookmarks.tmpl.html.





bookmark.edit.tmpl.html





<h4>Editing {{editBookmarkCtrl.bookmark.title}}</h4>
<form class="edit-form" role="form" ng-submit="editBookmarkCtrl.updateBookmark(editBookmarkCtrl.editedBookmark)" novalidate>
  <div class="form-group">
    <label>Bookmark Title</label>
    <input type="text" class="form-control" ng-model="editBookmarkCtrl.editedBookmark.title" placeholder="Enter title">
  </div>
  <div class="form-group">
    <label>Bookmark URL</label>
    <input type="text" class="form-control" ng-model="editBookmarkCtrl.editedBookmark.url" placeholder="Enter URL">
  </div>
  <button type="submit" class="btn btn-info btn-lg">Save</button>
  <button type="button" class="btn btn-default btn-lg pull-right" ng-click="editBookmarkCtrl.cancelEditing()">Cancel</button>
</form>




Bookmark-create.js





Click the Add button. Ui-sref= "Darren.categories.bookmarks.create", where the darren.categories.bookmarks.create is defined in Bookmark-create.js.








Angular.module (' categories.bookmarks.create ', [])





. config (function ($stateProvider) {


$stateProvider


. State (' Darren.categories.bookmarks.create ', {


URL: '/bookmarks/create ',


Templateurl: ' app/categories/bookmarks/create/bookmark-create.tmpl.html ',


Controller: ' Createbookmarkctrl as Createbookmarkctrl '


});


})


. Controller (' Createbookmarkctrl ', function ($state, $stateParams, Bookmarksmodel) {


var Createbookmarkctrl = this;





Execute after Add or cancel completion


function Returntobookmarks () {


$state. Go (' Darren.categories.bookmarks ', {


Category: $stateParams. Category


});


}





Cancel


function cancelcreating () {


Returntobookmarks ();


}





Add to


function CreateBookMark (bookmark) {


Bookmarksmodel.createbookmark (bookmark);


Returntobookmarks ();


}





createbookmarkctrl.cancelcreating = cancelcreating;


Createbookmarkctrl.createbookmark = CreateBookMark;





Resetting a form


function Resetform () {


Createbookmarkctrl.newbookmark = {


Title: ',


URL: ',


Category: $stateParams. Category


};


}





Resetform ();


})


;








The relationship between state now becomes this:

Specifically, click the Add button. Ui-sref= "Darren.categories.bookmarks.create", came to darren.categories.bookmarks.create this state, due to the URL and url: '/bookmarks /create ' format is consistent, paired with Createbookmarkctrl and bookmark-create.tmpl.html, and the $stateparams.category in the upper state is used here.





bookmark-create.tmpl.html



Click the Add button. Ui-sref = "Darren. Categories. Bookmarks. Create", where darren.categories.bookmarks.create is defined in bookmark-create.js.
angular.module('categories.bookmarks.create',[])
.config(function($stateProvider){
$stateProvider
.state('darren.categories.bookmarks.create',{
url: '/bookmarks/create',
templateUrl: 'app/categories/bookmarks/create/bookmark-create.tmpl.html',
controller: 'CreateBookmarkCtrl as createBookmarkCtrl'
};
}
.controller('CreateBookmarkCtrl', function($state, $stateParams, BookmarksModel){
var createBookmarkCtrl = this;
//Execute after adding or canceling
function returnToBookmarks(){
$state.go('darren.categories.bookmarks',{
category: $stateParams.category
};
}
/ / cancel
function cancelCreating(){
returnToBookmarks();
}
/ / add
function createBookmark(bookmark){
BookmarksModel.createBookmark(bookmark);
returnToBookmarks();
}
createBookmarkCtrl.cancelCreating = cancelCreating;
createBookmarkCtrl.createBookmark = createBookmark;
//Reset form
function resetForm(){
createBookmarkCtrl.newBookmark = {
Title: '',
Url: '',
category: $stateParams.category
}
}
ResetForm ();
}
;
The relationship between states now looks like this:
Angularjs implements the front-end add, delete and modify query, state nesting case - angularjs adds and deletes the query
Specifically, click the Add button. Ui-sref = "Darren. Categories. Bookmarks. Create", go to Darren. Categories. Bookmarks. Create. Since the format of URL and URL: '/ bookmarks / create' is the same, pair createbookmarkctrl and bookmark-create.tmpl.html. The $stateparams.category in the superior state is applied here.
bookmark-create.tmpl.html
<form class="create-form" role="form" ng-submit="createBookmarkCtrl.createBookmark(createBookmarkCtrl.newBookmark)" novalidate>
<div class="form-group">
<label for="newBookmarkTitle">Bookmark Title</label>
<input type="text" class="form-control" id="newBookmarkTitle" ng-model="createBookmarkCtrl.newBookmark.title" placeholder="Enter title">
</div>
<div class="form-group">
<label for="newBookmarkURL">Bookmark URL</label>
<input type="text" class="form-control" id="newBookmarkURL" ng-model="createBookmarkCtrl.newBookmark.url" placeholder="Enter URL">
</div>
<button type="submit" class="btn btn-info btn-lg">Create</button>
<button type="button" class="btn btn-default btn-lg pull-right" ng-click="createBookmarkCtrl.cancelCreating()">Cancel</button>
</form>
Addition, deletion, modification and query of tables in angularjs
The overall renderings are:
Angularjs implements front-end add, delete, modify and query, state nesting cases - angularjs instruction nesting
Each button in the figure can be operated.
(1) The first is the compilation of HTML page:
<!doctype html>
<html ng-app="myModule">
<head>
<meta charset="utf-8">
< title > student information management < / Title >
//Some libraries needed to be loaded
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/ng-table/dist/ng-table.js"></script>
<script src="bower_components/ng-table-export/ng-table-export.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/ng-table/dist/ng-table.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-3.3.2-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="module/styles/form.css">
<script src="module/scripts/controllers/Form.js"></script>
</head>
<body>
<div ui-view></div>
<div ng-controller="FormController">
<h3>Student information list</h3>
<br>
<div>
Search: < input type = "text" ng model = "titlefilter" placeholder = "enter keyword" > / / add < tr ng repeat = "student in students|filter: titlefilter" > to realize the retrieval of table content.
</div>
<br>
<table ng-table="tableParams" class="table table-bordered">
< tr ng repeat = "student in students|filter: titlefilter" > / / traverse each object
<td title="‘Name‘">
<span ng-if="!student.$edit">{{student.Name}}</span>
<div ng-if="student.$edit"><input class="form-control" type="text" ng-model="student.Name"></div>
</td>
<td title="‘Id‘">
<span ng-if="!student.$edit">{{student.Id}}</span>
<div ng-if="student.$edit"><input class="form-control" type="text" ng-model="student.Id"></div>
</td>
<td title="‘Grade‘">
<span ng-if="!student.$edit">{{student.Grade}}</span>
<div ng-if="student.$edit"><input class="form-control" type="text" ng-model="student.Grade"></div>
</td>
<td title="‘Actions‘" width="200">
<a href="" ng-if="!student.$edit" class="btn btn-default btn-xs" ng-click="student.$edit=true">Edit</a>
<a href="" ng-if="student.$edit" class="btn btn-default btn-xs" ng-click="student.$edit=false">Save</a>
<a ng-click="deleteStudent(obj)" ng-if="student.$edit" class="btn btn-default btn-xs" >Delete</a>
<!-- <a href="" ng-click="addStudent()" ng-if="student.$edit" class="btn btn-default btn-xs">Add</a> -->
</td>
</tr>
</table>
<div>
<input type="text" ng-model="newName" placeholder="input Name" required/>
<input type="text" ng-model="newId" placeholder="input Id" required/>
<input type="text" ng-model="newGrade" placeholder="input Grade" required/>
<input type="button" ng-click="addStudent()" value="Add" class="btn"/>
</div>
</div>
</body>
</html>
(2) JS code part:
var myModule=angular.module(‘myModule‘,[‘ngTable‘]).
controller(‘FormController‘,function($scope,ngTableParams,$sce){
$scope.students=[
{Name: 'Xiao Li', ID: '201401201', grade: 'computer technology'},
{Name: 'Li Lei', ID: '201401202', grade: 'computer technology'},
{Name: 'Xiajin', ID: '201401203', grade: 'computer technology'},
{Name: 'Hangzhou', ID: '201401204', grade: 'computer technology'}
];
$scope. Addstudent = function() {/ / add student function
$scope.students.push({Name:$scope.newName,Id:$scope.newId,Grade:$scope.newGrade});
$scope.newName=‘‘;
$scope.newId=‘‘;
$scope.newGrade=‘‘;
}
$scope. Deletestudent = function (student) {/ / delete a line
$scope.students.splice($scope.students.indexOf(student),1);
}
};