Push empty row with input field using angularjs

Question

I have one table which have edit, delete and add options. My problem is when I click on add button want to add row with empty input fields. I have write below code for this. What should I do to add empty row with empty input values.

My code

    <div ng-controller="AppKeysCtrl">
<button ng-click="add()">
Add
</button>
<table class="table table-hover mytable">
    <thead>
        <tr>
            <th></th>
            <th>Created</th>
            <th>App Key</th>
            <th>Name</th>
            <th>Level</th>
 http://jsfiddle.net/Thw8n/155/#update           <th>Active</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="entry in appkeys" data-ng-class="{danger:!entry.active}">
        <td>{{$index + 1}}</td>
        <td>{{entry.timestamp | date:'mediumDate'}}</td>
        <td>{{entry.appkey}}</td>
        <td>
            <span data-ng-hide="editMode">{{entry.name}}</span>
            <input type="text" data-ng-show="editMode" data-ng-model="entry.name" data-ng-required />
        </td>
        <td>
            <span data-ng-hide="editMode">{{entry.level}}</span>
            <select class="form-control" name="entry.level" data-ng-model="entry.level" data-ng-show="editMode">
                <option value="3">3 - Developer Access - [Temporary]</option>
                <option value="2">2 - Standard Tool Access - [Default]</option>
                <option value="1">1 - Administrative Access - [Admin Section Only]</option>
            </select>
        </td>
        <td>
            <span data-ng-hide="editMode">{{entry.active && 'Active' || 'Inactive'}}</span>
            <select class="form-control" name="entry.active" data-ng-model="entry.active" data-ng-show="editMode">
                <option value="true">Active</option>
                <option value="false">Inactive</option>
            </select>
        </td>
        <td>
            <button type="submit" data-ng-hide="editMode" data-ng-click="editMode = true; editAppKey(entry)" class="btn btn-default">Edit</button>
            <button type="submit" data-ng-show="editMode" data-ng-click="editMode = false" class="btn btn-default">Save</button>
            <button type="submit" data-ng-show="editMode" data-ng-click="editMode = false; cancel($index)" class="btn btn-default">Cancel</button>
        </td>
</tr>
</tbody>
</table>
    <pre>newField: {{newField|json}}</pre></br></br>
    <pre>appkeys: {{appkeys|json}}</pre>
</div>

app = angular.module("formDemo", []);

function AppKeysCtrl($scope, $http, $location) {
    var tmpDate = new Date();

          $scope.newField = [];
          $scope.editing = false;

     $scope.appkeys = [
         { "appkey" : "0123456789", "name" : "My new app key", "created" : tmpDate },
         { "appkey" : "abcdefghij", "name" : "Someone elses app key", "created" : tmpDate }
     ];

    $scope.editAppKey = function(field) {
        $scope.editing = $scope.appkeys.indexOf(field);
        $scope.newField[$scope.editing] = angular.copy(field);
    }

    $scope.saveField = function(index) {
        //if ($scope.editing !== false) {
            $scope.appkeys[$scope.editing] = $scope.newField;
            //$scope.editing = false;
        //}       
   };

    $scope.cancel = function(index) {
        //if ($scope.editing !== false) {
            $scope.appkeys[index] = $scope.newField[index];
            $scope.editing = false;
        //}       
    };

    $scope.add = function () {
            var entry = {};
            //$scope.goals.push(goal);
            $scope.appkeys.push(entry);
        };
}

angular.element(document).ready(function() {
    angular.bootstrap(document, ["formDemo"]);
});

I have problem in this that when I click on add empty row is adding which have form fields with ng-hide attribute. I want to add row dynamically with new input boxes for each column. What should I do for this? Please help.

Surjeet Bhadauriya · Accepted Answer · 2018-01-05 07:24:19Z

1

It's quite simple. You need to push an object with blank value into your array.

Below is the code:

Controller

$scope.add = function () {   
      $scope.appkeys.push({appkey : '', name : '', created : '' });
};

The above code will only add a row. I have updated your JSFiddle for your desired output.

Please go through with the given link.

http://jsfiddle.net/Thw8n/570/

edited Jan 5, 2018 at 7:24

answered Jan 5, 2018 at 6:58

Surjeet Bhadauriya

7,2243 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

vedankita kumbhar Over a year ago

Thanks for answer but I want to add <input type="text"> in each column when I click on add button

vedankita kumbhar Over a year ago

Edit button is working fine in my example but when I click on add button i want to add structure like this <td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>

Hrishikesh Kale Over a year ago

why you are not trying ng-bind-html everytime you call a function on add button. docs.angularjs.org/api/ng/directive/ngBindHtml

Surjeet Bhadauriya Over a year ago

@vedankitakumbhar, I have updated my answer. I updated the the jsfiddle.

vedankita kumbhar Over a year ago

Thank u so much. I want exactly the same answer. I have implemented this in my code getting error like "Cannot set property '1' of undefined" is any idea about this error.

|

Utpaul · Accepted Answer · 2018-01-05 07:14:59Z

1

You need to paste the following code:

   $scope.add = function () {

           $scope.appkeys.push({appkey : '', name : '', created : '' });
    };

answered Jan 5, 2018 at 7:14

Utpaul

2,1172 gold badges13 silver badges27 bronze badges

Comments

Pang · Accepted Answer · 2018-01-05 07:03:45Z

0

You can push object with empty properties in your appkey array:

var tempObject = {
    "appkey":"",
    "name":"",
    "created":""
};
$scope.appkeys.push(tempObject);

edited Jan 5, 2018 at 7:03

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jan 5, 2018 at 6:56

Ketki GS

11 bronze badge

1 Comment

vedankita kumbhar Over a year ago

Thanks for reply but when I click on add button i want to add structure like this <td><input type="text"></td><td><input type="text"></td><td><input type="text"></td>

Collectives™ on Stack Overflow

Push empty row with input field using angularjs

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related