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

Answer 2

一些事情。不要使用ng-init初始化变量，在控制器中执行此操作。其次，ng-repeat创建子范围，因此您应为此创建数据模型，因此data.selectedNode。然后，只需将selectedNode设置为当前重复的项目，然后在selectedNode等于当前item的情况下设置样式。

<div ng-init="data.selectedNode ={}"> <!-- do this in a controller, not ng-init -->
  <div ng-repeat="item in items" ng-click="data.selectedNode=item" ng-class="{selected: data.selectedNode == item}">{{item.value}}</div>
</div>

Answer 3

请试用下面的代码。如果单击行，则在selectedNode变量中绑定单击的项目值并应用 活动行 类。

-(BOOL)connectedToNetwork  {
    NSURL* url = [[NSURL alloc] initWithString:@"http://google.com/"];
    NSData* data = [NSData dataWithContentsOfURL:url];
    if (data != nil)
        return YES;
    return NO;
}

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

3 个答案: