CODEWITHSUNDEEP
htmlcssangularjs
aman
aman

Reputation: 6252

Angularjs Contenteditable in ng-repeat with row/column actions

I have HTML table where its rows and columns are dynamically created by angular js. After a row/column has been added, I would like to have a option that when the user hovers over that row or column it would display a delete button icon clicking which would delete that row/column. For delete column I got it working. So if you see my below demo and hover over to just above top of column you would see a delete icon.

I am having issues with row delete. I want the delete icon to appear to the left of first row, but it does not appear. The issue is because I am using contenteditable for that row. If I remove that it works and I can see the icon.

contenteditable="true"

Here is the relevant code:

 <td class="unique-id" contenteditable="true" ng-model="r.id">{{r.id}}
    <div class="btn-group btn-group-xs">
      <button ng-show="row == $index" type="button" class="btn" ng-click="deleteRow($index)">
      <span class="glyphicon glyphicon-remove"></span></button>
    </div>
</td>

Above if I remove contenteditable or make contenteditable="false", I can see the delete icon but not with contenteditable="true". I want to have this row editable so want this property to be true.

Any workarounds to get this resolved or any other solutions.

Below is the codepen demo: https://codepen.io/anon/pen/bmBXqg

Upvotes: 0

Views: 190

Answers (1)

Jazib
Jazib

Reputation: 1381

This is a work around that you can use. I basically just moved the id to a div instead of the td so both divs can coexist in the td while one has contenteditable set to true

 <td class="unique-id">
            <div contenteditable="true" ng-model="r.id">{{r.id}}</div>
            <div class="btn-group btn-group-xs">
              <button ng-show="row == $index" type="button" class="btn" ng-click="deleteRow($index)"><span class="glyphicon glyphicon-remove"></span></button>
            </div>
          </td>

Upvotes: 1

Related Questions