CODEWITHSUNDEEP
javascriptangularjs
aman
aman

Reputation: 6242

AngularJs: Adding dynamic row, preventing duplicates

I have created a html table that user can add dynamic columns and rows. When you click on add column it adds a column and when you start typing in the first row it should create a new row.

Here is my jsfiddle: http://jsfiddle.net/ydevb1Lx/

There are some issues with add row here. When user types something I am creating a new row. But when the user types in second letter it again creates another row and so on. Also on backspace it again creates a new row. Not sure whats going on here.

Second thing which I am not able to find out is how can I validate the table so that only the ID column does not have any duplicate. Since I am using ng-change event how can I check whether there already exists the same ID in the table and show some kind of alert. Below is the relevant code:

HTML Table:

 <table class="table table-bordered" ng-form="targetTableForm" ng-class="{submitted: targetTableSubmitted}">
      <colgroup>
        <col class="unique-id">
      </colgroup>
      <thead>
        <tr>
          <th class="unique-id">Name #</th>
          <th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
          <!--<th class="view-next-set"><a href="#">...</a></th>-->
          <td class="center add-column"><a href ng-click="open()">+ Add Column</a></td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="r in targetTable.rows">
          <td contenteditable="true" ng-model="r.tableId"  ng-change="r.tableId? addNewRow(r.tableId, r): undefined"></td>
          <td contenteditable="true" ng-repeat="column in targetTable.columns" ng-required="!$parent.$last"></td>
          <!--<td class="blank" colspan="2"></td>-->
        </tr>
      </tbody>
    </table>

Code used to create add row:

  $scope.addNewRow = function(value, row) {
    if (!value || value === "" || typeof value !== 'string') return;
    $scope.targetTable.rows.push({});

    row.id = $scope.targetTable.uniqueIdCounter++;
  };

Below is how I initialize array:

  var table = {
  id: 0,
  name: "table 1",
  columns: [],
  rows: [{}],
  uniqueIdCounter: 1037
};

$scope.tables = [table];
$scope.targetTable = $scope.tables[0];

Upvotes: 0

Views: 1003

Answers (2)

Patharraj
Patharraj

Reputation: 51

check the condition before push the rows value.length ==1

if(value.length ==1){

     $scope.targetTable.rows.push({});
}

Upvotes: 0

Lasithe
Lasithe

Reputation: 2740

Check if the last row value is empty or not before adding a new row in addNewRow. If empty don't add. Issue you had was you are calling the addNewRow function in ng-change. It calls the function every time you change the input value. But you didn't check if the latest row is empty or not.

For the second question you can use ng-blur directive. I have created two extra functions checkIDforDups to add a css class and checkForDups to check for duplicates in tableId.

Here's the Jsfiddle: http://jsfiddle.net/ydevb1Lx/51/

Upvotes: 1

Related Questions