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

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

<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的背景色。这意味着只能选择一项。如何解决这个问题？

有几件事。不要使用ng init初始化变量，请在控制器中进行初始化。其次，ng repeat创建一个子作用域，因此您应该为此创建一个数据模型，即data.selectedNode。然后只需将selectedNode设置为当前重复的项，然后如果selectedNode等于当前项，则设置样式

问题很微妙-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>

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

---

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

请尝试以下代码。 若单击行，则在selectedNode变量中绑定单击的项值并应用活动行类

---

哎呀。。。小错误。您需要将ng click更改为equal data。selectedNode=item和equality引用相同的值，否则您只是在修改子范围中的值。如何最初设置第一个值是粗体的。@WhiteMarcus给容器元素一个类，然后使用css选择第一个元素。将允许您使用类似的css。容器：第一个子项{font-weight:bold；}。如果需要，还可以使用ng class:ng class={bolded:$index==0}分配一个类，但仍然需要css。

<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>

<style>
.active-row{
        background-color: #D4D0D0;
}
</style>

<div ng-init="selectedNode = false">
  <div ng-repeat="item in items" ng-click="selectedNode=item.value" ng-class="(selectedNode == item.value) ? 'active-row' : ''">{{item.value}}</div>
<br />
</div>