更改所选 ng-repeat 项的样式并删除其他项的样式

Question

我是 AngularJS 的新生。我尝试使用 AngularJS 修改项目的样式，但我遇到了这个错误：当我选择另一个项目时，第一个项目的背景仍然是蓝色。如何更改我的代码来解决这个问题？这是我的plnkr。这是代码。

<div ng-init="selectedNode = false">
  <div ng-repeat="item in items" ng-click="selectedNode=true" ng-class="{selected: selectedNode == true}">{{item.value}}</div>
</div>

单击 1 后单击 2 时，应删除 1 的背景颜色。这意味着只应选择一项。如何解决这个问题？

Answer 1

问题很微妙——ng-repeat为其每个条目创建一个新的隔离范围。因此，当您的点击处理程序设置selectNode为 true 时，它​​发生在它自己的范围内，而不是它的父级。

容易补救。（我用一些模拟数据包围了你的例子——我相信你有自己的）：

<div ng-app ng-init="items = [{value: 'red'},
   {value: 'green'},{value: 'blue'},{value: 'yellow'},
   {value: 'orange'}]">

<div ng-init="selection = { selectedNode:  null }">
  <div ng-repeat="item in items" 
    ng-click="selection.selectedNode = item" 
    ng-class="{selected: selection.selectedNode == item}">
        {{item.value}}
  </div>
</div>

</div>

https://jsfiddle.net/kfnkn827/

首先，我在父作用域中创建了一个可由子级修改的对象。请注意，我只是在父级中使用引用而不是布尔值。这使您无需存储一堆标志。

编辑：提交后我看到了你的 Plinkr。对不起！:-P