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 :  Angular Autocomplete Textbox PHP MySQLi

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

(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 :  Vuejs dynemically slider - Vuejs image slider component example - Vuejs Carousel Slider Components

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.

Add a Comment

Your email address will not be published. Required fields are marked *