Add Remove and Update specific data In JSON using AngularJS

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 :  jQuery Export HTML Table Data to Excel, CSV and Text

index.html

<div>
    <div>
        <table>
            <tbody>
            <tr>
                <!-- show-->
                <td>{{client.client_id}}</td>
                <td>{{client.name}}</td>
                <td>{{client.age}}</td>
                <td>
                    <button>Edit</button>
                    <button>Detele</button>
                </td>
                <!-- Edit-->
                <td>{{client.client_id}}</td>
                <td></td>
                <td></td>
                <td>
                    <button>Save</button>
                    <button>Detele</button>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td>
                    <button>Add</button>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

liveCtrl.js

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

(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": "300x250"
        };

        $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;
        };
    }
})();

LiveFactory.js

(function () {
    'use strict';

    angular
            .module('liveapp')
            .factory('LiveFactory', LiveFactory);

    LiveFactory.$inject = [];

    function LiveFactory() {

        var self = this;

        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;
    }
})();

Example

READ :  Codeigniter config set and get variable

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.