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

Question

一系列链接apple, orange, banana 是使用ng-repeat 创建的。点击这些链接会导致该水果的颜色出现在链接下方。

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

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 }
    ];

这样你可以控制默认值

另外，你不一定需要toggle方法，你可以在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，它确保根据当前迭代的子范围评估表达式，并且每个子范围都有自己的“显示”范围属性。

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。现在我们分别使用每个水果项目，通过在每个水果项目中维护一个密钥 show 来使用 f.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>