时间戳

首页 > 解决方案 > 将按钮绑定到 ng-repeat 内的元素

javascript - 将按钮绑定到 ng-repeat 内的元素

问题描述

我正在尝试将内部的按钮绑定ng-repeat到同一重复中按钮的唯一元素，这对我来说很难说，所以我将给出一个代码片段。

<li ng-repeat="thing in listOfThings track by $index">
  <div ng-model="text"> text < /div>
  <button ng-click="highlightText()" />
</ li>

虽然不准确，但就是这个意思。问题是当我单击按钮时，它会突出显示listOfThings.

注意：假设文本被赋予了一个 ng 类，当布尔值为真时突出显示，当它为假时不突出显示，由按钮切换。

知道如何将该按钮“绑定”到只有一个文本，这样它就不会突出显示其他所有内容？

我试过用谷歌搜索它，它可能是一个重复的问题，但不确定如何搜索这个特定的东西，所以如果它是重复的，请链接答案。

标签： javascriptangularjsangularjs-ng-repeatuniquebind

解决方案

如果我正确理解了您的示例，您ng-class将根据单击事件将该类应用于重复中的所有项目。

您需要按列表中的每个元素单独跟踪按钮选择。就像是：

HTML：

<li data-ng-repeat="thing in listOfThings track by $index">
  <div data-ng-model="text" data-ng-class="{ 'highlighted': thing.Selected  }"> < /div>
  <button data-ng-click="highlightText(thing)" />
</li>

JS：

$scope.highlightText = function(thing){
    thing.Selected = true;
}

CSS：

.highlighted{
   background-color: yellow;
}

编辑：skyboyer提出的好建议，可以通过移动突出显示的函数而不是跟踪thing变量上的标志来使其更清晰。

HTML：

<li data-ng-repeat="thing in listOfThings track by $index">
  <div data-ng-model="text" data-ng-class="{ 'highlighted': selected  }"> < /div>
  <button data-ng-click="selected = true" />
</li>

推荐阅读