ng-click功能影响所有ng-repeat元素

Question

使用ng-repeat创建一系列链接apple, orange, banana 。 单击这些链接将导致水果的颜色显示在链接下方。

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

Jsfiddle： http ： //jsfiddle.net/hut13fox/

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>

JS

var myApp = angular.module('myApp', []);

FruitCtrl = function($scope) {
    $scope.fruits = [
        { title: 'apple', color: 'red' },
        { title: 'orange', color: 'orange' },
        { title: 'banana', color: 'yellow' }
        ];

    $scope.show = false
    $scope.toggleShow = toggleShow

    function toggleShow() {
        console.log('toggle')
        $scope.show = !$scope.show
    }
}
console.log('Hello')

Answer 1

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

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

并格式化您的JS

function toggleShow(fruit) {
    fruit.show = fruit.show
}

你的对象将是这样的：

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

这样您就可以控制默认值

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

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

Answer 2

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

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

这有效的原因是因为ngRepeat将在每次迭代时创建子范围。 通过使用表达式show=!show ，它确保针对当前迭代的子范围计算表达式，并且每个子范围都获得其自己的“show”范围属性。

Answer 3

更改您的代码如下：

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

而你的JS来了

function toggleShow(f) {
    console.log('toggle')
    f.show = !f.show
}

基本上，您之前使用的是针对导致问题的所有项目的常见范围show 。 现在我们分别使用每个水果项来使用f.show切换每个项目，方法是在每个水果项目中保持一个关键show 。

在这里查看工作代码：

 var myApp = angular.module('myApp', []); FruitCtrl = function($scope) { $scope.fruits = [{ title: 'apple', color: 'red' }, { title: 'orange', color: 'orange' }, { title: 'banana', color: 'yellow' }]; $scope.show = false $scope.toggleShow = toggleShow function toggleShow(f) { console.log('toggle') f.show = !f.show } } myApp.controller('FruitCtrl', FruitCtrl); console.log('Hello') 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <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> </div>