将按钮绑定到ng-repeat中的元素
将按钮绑定到ng-repeat中的元素
提问于 2018-08-23 03:49:38
我正在尝试将ng-repeat中的一个按钮绑定到同一重复中该按钮的唯一元素，这对我来说非常困难，所以我给出了一个代码片段。
<li ng-repeat="thing in listOfThings track by $index">
<div ng-model="text"> text < /div>
<button ng-click="highlightText()" />
</ li>虽然不是很精确，但这就是我们的想法。问题是，当我单击该按钮时，它将突出显示listOfThings中的所有文本。
注意:假设文本被赋予了一个ng-class，当boolean为true时它会高亮显示，当boolean为false时不会高亮显示，通过按钮进行切换。
你知道如何将按钮“绑定”到一个文本上，这样它就不会高亮显示其他所有内容了吗？
我已经尝试在谷歌上搜索它，这可能是一个重复的问题，但不确定如何搜索这种特定的东西，所以请链接答案，如果它是重复的。
回答 1
Stack Overflow用户
发布于 2018-08-23 04:03:01
如果我正确理解您的示例，您的ng-class将根据单击事件将类应用于repeat中的所有项。
您需要按列表中的每个元素逐个跟踪按钮选择。类似于：
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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51974146
复制相关文章
相似问题