时间戳

首页 > 解决方案 > 将另一个元素传递给 ng-click

html - 将另一个元素传递给 ng-click

问题描述

我想创建一个项目列表，它们是简单的可点击文本。每次单击一个项目时，它都会转换为输入（文本框），您可以对其进行编辑。我已经这样做了。我唯一缺少的是在单击项目时将焦点设置在输入元素上。我的 HTML 代码如下：

<div ng-repeat="item in items">
  <span ng-if="!valueIsEditedForItem(item.id)">
    <a href="" ng-click="editValueForItem(item.id)">
      {{ item.value }}
    </a>
  </span>
  <span ng-if="valueIsEditedForItem(item.id)">
    <input ng-model="edited_value"
           ng-keyup="onValueInput($event, item.id, edited_value)"/>
  </span>
</div>

<a>元素和<input>元素是两个不同的元素。所以，我的想法是以某种方式将输入元素传递给ng-click="editValueForItem(item.id). 它应该看起来像这样：

<a href="" ng-click="editValueForItem(item.id, inputElement)">
  {{ item.value }}
</a>

然后我可以通过这样做将焦点设置到输入元素：

inputElement.focus();

我知道该$event变量将事件的元素保存在$event.target. 但我的活动是 on<a>而不是 on <input>。如何将<input>元素引用到 中<a>？

编辑：解决方案

从答案中阅读解决方案建议后，我最终通过 id 引用实现了这一点：

HTML

<input id="{{'input' + item.id}}"
       ng-model="edited_value"
       ng-keyup="onInput($event, item.id, edited_value)"/>

JS

$scope.editValueForItem = function (itemId) {
  $scope.currentlyEditedItemId = itemId;

  // focus on the input element
  setTimeout(function () {
    var inputElement = document.getElementById("input" + itemId);
    if (inputElement) {
      inputElement.focus();
    }
  }, 0);
};

该setTimeout子句必须优先考虑元素的初始化。如果删除它，则该getElementById命令将返回 null，因为输入元素尚未初始化。

但是，创建我自己的指令的解决方案将是一个更合适的选择。

标签： htmlangularjspass-by-reference

解决方案

一种解决方案是传递$event给函数并使用以下方法查找输入$event.target：

<a href="" ng-click="editValueForItem($event)">
    {{ item.value }}
</a>

editValueForItem = function($event) {
    let $target = angular.element($event.target);
    let nextInput = $target.parent().parent().find('input')[0];

    if (nextInput.length) {
        nextInput.focus();
    }
}

推荐阅读