Question

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

问题：但是，当点击任何链接时，会显示所有水果的颜色。我们如何将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来切换每个项目。

在此处查看有效的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: