Search This Blog

Wednesday, September 30, 2015

AngularJS - Add Row dynamically

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

    <title>Add Row dynamically</title>

    <script src=""></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 () {

                    FirstName: "Fist Name",
                    LastName: "Last Name",
                    IsActive: true,
                    Save: "Save",

                }); //Added the values to scopes which need to be added

        <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>
                <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 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">
            <br />


No comments:

Post a Comment