Javascript 影响所有ng重复元素的ng单击功能

使用

ng repeat

创建了一系列链接

apple、orange、banana

。单击这些链接将使该水果的颜色显示在链接下方

问题：但是，当单击任何链接时，都会显示所有水果的颜色。我们如何限制点击事件只显示被点击水果的颜色

Jsfiddle:

HTML

<div ng-controller="FruitCtrl">
    <div ng-repeat="f in fruits">
        <a href="#" ng-click="toggleShow()">{{ f.title }}</a>
        <div ng-show="show">
            {{ f.color }}
        </div>
    </div>
</div>

---

更改代码，如下所示：

<div ng-controller="FruitCtrl">
  <div ng-repeat="f in fruits">
        <a href="#" ng-click="toggleShow(f)">{{ f.title }}</a>
        <div ng-show="f.show">
            {{ f.color }}
        </div>
  </div>
</div>

基本上，您以前对导致问题的所有项目都使用了一个公共范围

show

。现在我们分别使用每个水果项目，通过在每个水果项目中维护一个键来使用

f.show

切换每个项目

在此处查看工作代码：

var myApp=angular.module（'myApp'，[]）；
exportCtrl=函数（$scope）{
$scope.fruits=[{
标题:"苹果",，
颜色：“红色”
}, {
标题:"橙色",，
颜色：“橙色”
}, {
标题:"香蕉",，
颜色：“黄色”
}];
$scope.show=false
$scope.toggleShow=toggleShow
功能切换显示（f）{
console.log（'toggle'）
f、 show=！f.show
}
}
myApp.controller（'FruitCtrl'，FruitCtrl）；
console.log（'Hello'）

{{f.color}}

您应该在每个元素中设置可见性

<div ng-controller="FruitCtrl">
 <div ng-repeat='fruit in fruits'>
       <a href="#" ng-click='toggleShow(fruit)'>{{ fruit.title }}</a>
       <div ng-show='fruit.show'>
           {{ fruit.color }}
       </div>
 </div>
</div>

您的对象将类似于：

   $scope.fruits = [
    { title: 'apple', color: 'red', show : true },
    { title: 'orange', color: 'orange', show : true },
    { title: 'banana', color: 'yellow', show : true }
    ];

这样可以控制默认值

此外，您不一定需要toggle方法，您可以在html标记中内联执行：

<a href="#" ng-click='fruit.show = !fruit.show'>{{ fruit.title }}</a>

---

我会这样做，而不需要您修改您的模型：

<div ng-controller="FruitCtrl">
  <div ng-repeat='f in fruits'>
        <a href="#" ng-click='show=!show'>{{ f.title }}</a>
        <div ng-show='show'>
            {{ f.color }}
        </div>
  </div>
</div>

{{f.color}}

---

之所以这样做是因为ngRepeat将在每次迭代中创建一个子范围。通过使用表达式

show=！show

，它确保根据当前迭代的子范围计算表达式，并且每个子范围都有自己的“show”范围属性

如果

$scope.fruits

是从数据库填充的，比如

$scope.fruits=$meteor.collection（fruits，false）

，您将如何为

$scope.fruits

中的所有元素将

show

属性添加到false？如果它们不存在，angular将在运行时为您创建它们，angular将它们设置为

false

？似乎将其设置为一个隐藏水果颜色显示的值。然后您可以将

ng show

更改为

ng hide

，并通过默认设置使其可见对不起，我的坏消息。未能删除

$scope

。谢谢，我想您指的是“子”范围，而不是隔离范围

   $scope.fruits = [
    { title: 'apple', color: 'red', show : true },
    { title: 'orange', color: 'orange', show : true },
    { title: 'banana', color: 'yellow', show : true }
    ];

<a href="#" ng-click='fruit.show = !fruit.show'>{{ fruit.title }}</a>

<div ng-controller="FruitCtrl">
  <div ng-repeat='f in fruits'>
        <a href="#" ng-click='show=!show'>{{ f.title }}</a>
        <div ng-show='show'>
            {{ f.color }}
        </div>
  </div>
</div>