0

我被一些东西困住了，这应该很普通。我正要写一个工厂来解决这个问题，但在想，一定有一个聪明的方法来解决这个问题。

我的指令 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>元素时，将显示所有输入字段。因为他们都使用相同的变量。我无法全神贯注地为这个问题制定一个适当的角度解决方案，所以只有这个项目中的一个被切换。这样的解决方案是否存在？

4

2 回答 2

5

一种简单的方法是使用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;
};
于 2015-06-12T11:03:54.240 回答
2

尝试这个：

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

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

如果您在项目中保留“显示”标志，则可以为每个项目单独切换它。如果未定义“item.display”，则将其视为“false”。

至少我通常是这样做的，不过可能会有更好的解决方案。

于 2015-06-12T10:59:35.877 回答