Question

我正在尝试将List<Input> inputs = new List<Input>(); Input input = new Input(); preJsonData.username = "xxxx"; preJsonData.password = "yyyy"; input.name = "cccc"; inputs.Add(input); input.name = "dddd"; inputs.Add(input); preJsonData.inputs = inputs; //<-- this bad boy string postJsonData = JsonConvert.SerializeObject(preJsonData); //string postJsonData = new JavaScriptSerializer().Serialize(preJsonData); return postJsonData;中的按钮绑定到同一重复中按钮的唯一元素，这对我来说很难说，所以我将给出一个代码段。

ng-repeat

虽然不确切，但这就是想法。问题是，当我单击按钮时，它将突出显示<li ng-repeat="thing in listOfThings track by $index"> <div ng-model="text"> text < /div> <button ng-click="highlightText()" /> </ li>内的所有文本。

注意：假定为该文本提供了ng-class，该类在布尔值为true时突出显示，而在false时不突出显示（通过按钮切换）。

有什么主意如何将按钮“绑定”到仅一个文本，以使其不会突出显示其他所有内容？

我试图用Google搜索它，它可能是一个重复的问题，但是不确定如何搜索这个特定的东西，因此如果重复，请链接答案。

Answer 1

如果我正确理解了您的示例，则您的ng-class将基于click事件将类应用于重复操作中的所有项。

您需要分别跟踪列表中每个元素的按钮选择。像这样：

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>

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

1 个答案: