使用相同变量的角度多重隐藏

Question

我坚持一些东西,这应该是非常普通的.我即将写一个工厂来解决这个问题,但我在想,必须有一个聪明的方法.

我的指令templateUrl中有一个ng-repeat:

<div ng-repeat="item in items">
   <p ng-click="toggle()" ng-hide="display">{{item.$value}}</p>
   <input ng-model="item.$value" ng-show="display">
   <button ng-show="display" ng-click="changeText(item)">finish</button>
</div>

我的切换功能如下所示:

$scope.toggle = function (){
      $scope.display = !$scope.display;
    };  

这意味着,当我单击一个<p>元素时,将显示所有输入字段.因为他们都使用相同的变量.我无法绕过这个问题做出正确的角度解决方案,以便只切换此项目中的一个.这样的解决方案是否存在？

Answer 1

一个简单的方法,使其是使用item.display替代display,并通过item在toggle().像这样的东西:

<div ng-repeat="item in items">
    <p ng-click="toggle(item)" ng-hide="item.display">{{item.$value}}</p>
    <input ng-model="item.$value" ng-show="item.display">
    <button ng-show="item.display" ng-click="changeText(item)">finish</button>
</div>

JS:

$scope.toggle = function (item) {
    item.display = !item.display;
};