How to change attributes in DOM when adding a row?

Question

JavaScript

There is a table with users.
There is a button "add"
How, when adding a new line, enable in-place editing of data for a new element, without touching previously added ones, and after passing the validation, disable editing the field?
ontentEditable="false"
In the controller, I only need to add one more object to the array so that it is displayed on the page, but I need to be able to change the user data up to a certain point!
In other words, how can the attributes of a tag in HTML be manipulated from the Controller when it is added to the DOM?

Answer 1

Write a directive. This is the only correct way.
Pseudocode:

function editOnceDirective(){
    return {
         require: 'ngModel',
         link: function (scope, el, attr, ctrl) {
              // включаем редактирование если у нас пустое значение
              // еще стоит проверять убрали ли мы фокус с поля и все такое
              scope.$watch(function () { return ctrl.$invalid; }, function (isInvalid) {
                   if (!isBoolean(isInvalid)) return;

                   el.attr('contenteditable', isInvalid);
              }

              // вешаем листенеры на элемент что бы обновлять значение
         }
    }
}

Read about ngModelController, custom inputs, etc.

Answer 2

There is no such thing in Angular, you can only do something like this:

<div ng-hide='editMode'>{{content}}</div>
<div ng-if='editMode' contenteditable>{{content}}</div>