Search This Blog

Wednesday, September 30, 2015

AngularJS - Add Row dynamically

<!doctype html>
<html ng-app="app">
<head>

    <title>Add Row dynamically</title>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

    <script type="text/javascript">

        var ng = angular.module('app', []);

        ng.controller('controller', function ($scope) {

            $scope.rows = []; // declared rows and assigned a empty row to the scope

            $scope.addDynamically = function () {

                $scope.rows.push({
                    FirstName: "Fist Name",
                    LastName: "Last Name",
                    IsActive: true,
                    Save: "Save",

                }); //Added the values to scopes which need to be added
            };
        });
    </script>
    <body>

        <h4>Adding Controls Dynamically in Angular Js </h4>

        <div ng-controller="controller" style="border:5px solid gray;width:500px;">

            <button ng-click="addDynamically()" style="color:blue;font-size:18px;">Add New Row Dynamically</button>
            <div>
                <br />
                <input type="text" placeholder="Fist Name">

                <input type="text" placeholder="Last Name">

                <input type="checkbox" name="check" value="inline">IsActive
                <input type="Button" name="check" value="Save" placeholder="Save">
            </div>

            <div ng-repeat="row in rows">

                <input type="text" placeholder="{{row.FirstName}}">

                <input ng-class="{'blockInput': !row.IsActive}" placeholder="{{row.LastName}}" type="text">

                <input type="checkbox" name="check" value="inline">IsActive
                <input type="Button" placeholder="{{row.LastName}}" value="Save">
            </div>
            <br />
        </div>
    </body>

</html>  

No comments:

Post a Comment