AngularJS Grid CRUD Example – Angular UI Grid
In this Post We Will Explain About is AngularJS Grid CRUD Example – Angular UI Grid With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Apply CRUD Operations in Dynamic Grid Using AngularJSExample
In this post we will show you Best way to implement Angular js with UI Grid Insert,Update, Delete, hear for How to insert, update, delete and show the data using AngularJs Gridwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
AngularJS Grid system Example Steps
create a simple index.html page to PUT angular.js libs,angular-touch.js libs and angular-animate.js libs and also include css style.
and then create a module(liveApp) this is a module name in simple angularjs application.then we create a new controller.like as a controller name (liveCtrl) name in this app.
index.html(Make a HTML file and define markup)
[php]
http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js
http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js
http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js
http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js
http://ui-grid.info/release/ui-grid-unstable.js
[/php]
app.js(Make a js file and define scripting)
Last include simple file app.js it’s a new or must run main part of angularjs application.so means custom include js include in index.html page.
as well as Gridview mostly used simple ui-grid in this angularjs web-application.
Simple Custom main Logic File in new include same path here app.js
[php]
// liveApp its used module name
var liveApp = angular.module(‘liveApp’, [‘ngAnimate’, ‘ngTouch’, ‘ui.grid’, ‘ui.grid.selection’, ‘ui.grid.edit’,’ui.grid.cellNav’]);
//liveCtrl its used controller name
liveApp.controller(‘liveCtrl’, [‘$scope’, function ($scope) {
//some records of some json using loading time
$scope.data = [
{ name: ‘angular ‘, title: ‘demo angularjs’,lastname: ‘gridview’ ,address: ‘char us road’ ,country: ‘USA’ ,status: ‘Active’ },
{ name: ‘infinityknow add ‘, title: ‘infinityknow add’,lastname: ‘infinityknow add’ ,address: ‘infinityknow add’ ,country: ‘infinityknow add’ ,status: ‘infinityknow add’ }
];
//Create a new column name
$scope.columnDefs = [
{name: ‘name’, cellEditableCondition:true},
{name: ‘title’, cellEditableCondition:true},
{name: ‘lastname’, cellEditableCondition:true},
{name: ‘address’, cellEditableCondition:true},
{name: ‘country’, cellEditableCondition:true},
{name: ‘status’, cellEditableCondition:true}
];
$scope.createNew=function()
{
$scope.data.push( { name: ‘infinityknow add ‘, title: ‘infinityknow add’,lastname: ‘infinityknow add’ ,address: ‘infinityknow add’ ,country: ‘infinityknow add’ ,status: ‘infinityknow add’ });
};
$scope.insertNewItem=function()
{
$scope.data.splice(1, 0, { name: ‘infinityknow add ‘, title: ‘infinityknow add’,lastname: ‘infinityknow add’ ,address: ‘infinityknow add’ ,country: ‘infinityknow add’ ,status: ‘infinityknow add’ });
};
}]);
[/php]
I hope you have Got What is How to insert, update, delete and show the data using AngularJs Grid And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.