Angularjs Contenteditable в ng-repeat с действиями строки / столбца

Question

У меня есть HTML-таблица, где ее строки и столбцы динамически создаются угловыми js.После добавления строки / столбца я хотел бы иметь возможность, чтобы при наведении курсора мыши на эту строку или столбец отображался значок кнопки удаления, который удалял бы эту строку / столбец.Для удаления столбца я получил это работает.Так что если вы увидите мое демо ниже и наведите курсор чуть выше верхней части столбца, вы увидите значок удаления.

У меня проблемы с удалением строки.Я хочу, чтобы значок удаления отображался слева от первого ряда, но он не отображается.Проблема в том, что я использую contenteditable для этой строки.Если я уберу это, он работает, и я вижу значок.

contenteditable="true"

Вот соответствующий код:

 <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>

Выше, если я удалю contenteditable или сделаю contenteditable = "false",Я вижу значок удаления, но не с contenteditable = "true".Я хочу, чтобы эта строка была редактируемой, поэтому хочу, чтобы это свойство имело значение true.

Любые обходные пути для разрешения этой проблемы или любые другие решения.

Ниже приведена демонстрационная версия codepen: https://codepen.io/anon/pen/bmBXqg

Answer 1

Это обходной путь, который вы можете использовать.Я просто переместил id в div вместо td, чтобы оба div могли сосуществовать в td, в то время как для contenteditable установлено значение 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>