Question

我正在开发一个todo应用。使用ng-repeat在屏幕上显示任务，其默认状态是使用静态控件或基本{{}}绑定显示任务的内容。单击控件时，我隐藏静态视图并显示具有相同内容的不同视图，但在textarea中进行编辑。

目前，当我点击静态视图时，它会切换视图，但我想补充一点，它也会将焦点移到textarea。

这是我的重复：

    <div ng-repeat="note in Todo.GetNotes()" class="brick" ng-class="{mymodal: note.Modal, nonmodal: !note.Modal}" ng-click="Todo.toggleModal(note)">
      <div class="mdl-card mdl-shadow--4dp demo-card-event" ng-class="[note.Color, {done: note.Done}]">
        <div class="mdl-card__title mdl-card--expand">
          <h4 ng-hide="note.Modal"><!-- Static View -->
            {{ note.Content }}
          </h4>
          <div ng-show="note.Modal" class="EditView"><!-- Editable View -->
            <textarea ng-model="note.Content" class="EditContent" ng-click="$event.stopPropagation()"></textarea>
          </div>
        </div>
        <div class="mdl-card__menu">
          <button ng-hide="note.Modal" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" ng-class="{'done-check': !note.Done}" ng-click="Todo.toggleDone(note)">
            <i class="material-icons">done</i>
          </button>
        </div>
      </div>
    </div>

我使用的是Material Design Lite，因此它有很多额外的类，但缺点是当你点击ng-repeat元素时，如果该元素是Modal或者它将会切换不。如果它的模态，它是可编辑的，并且textarea是可见的。

我的Todo.toggleModal目前只有一行：

note.Modal = !note.Modal

我认为我想在textarea上添加对focus()的调用，但是我不确定如何访问特定文本区域的笔记我点击了。我该怎么做？

在ng-repeat中聚焦（）特定的DOM元素？

0 个答案: