Add Remove and Update specific data In JSON using AngularJS

Add Remove and Update specific data In JSON using AngularJS

In this Post We Will Explain About is Add Remove and Update specific data In JSON using AngularJS 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 how to add, edit and delete rows of a html table with angularjsExample

Example of Add Remove and Update specific data In JSON

In this post we will show you Best way to implement how to add edit and delete rows of a html table with angularjs, hear for dynamically add remove rows in html table using angularjswith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

READ :  JavaScript Read XML File local Example

index.html

[php]

{{client.client_id}} {{client.name}} {{client.age}}
{{client.client_id}}

[/php]

liveCtrl.js

[php]
(function () {
‘use strict’;

angular
.module(‘liveapp’)
.controller(‘liveCtrl’, liveCtrl);

liveCtrl.$inject = [‘$scope’, ‘LiveFactory’];

function liveCtrl($scope, LiveFactory) {

$scope.clientList = LiveFactory.clientList;

function init() {
LiveFactory.get();
}

init();

$scope.detailsModel = {
“client_id”: 1,
“name”: “Format 1”,
“age”: “300×250”
};

$scope.add = function () {
$scope.clientList.push($scope.detailsModel);
};

$scope.delete = function (index) {
$scope.clientList.splice(index, 1);
};

$scope.rowedited = -1;
$scope.clienteditMo = {
“client_id”: 0,
“name”: “”,
“age”: “”
};

$scope.edit = function (index) {
$scope.rowedited = index;
};

$scope.finishEdit = function (index) {
$scope.clientList[index] = $scope.clienteditMo;
$scope.rowedited = -1;
};
}
})();
[/php]

LiveFactory.js

[php]
(function () {
‘use strict’;

angular
.module(‘liveapp’)
.factory(‘LiveFactory’, LiveFactory);

LiveFactory.$inject = [];

function LiveFactory() {

var self = this;

READ :  VueJS MVC Application Architecture - VueJS model view controller example

self.clientList = [];
self.get = $http.get(‘data/myproducts.json’)
.then(function (response) {
self.clientList = response.data;
}).catch(function (error) {
// simple generate log error
});

return self;
}
})();
[/php]

Example

I hope you have Got What is add and delete rows dynamically with textboxes using angularjs 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.

Leave a Comment