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

つまり、1 つの<p>要素をクリックすると、すべての入力フィールドが表示されます。それらはすべて同じ変数を使用しているためです。この問題に対する適切な角度の解決策を作成することに頭を悩ませることはできないため、このアイテム内の 1 つだけが切り替えられます。そのような解決策は存在しますか？

4

2 に答える 2

5

これを作成する簡単な方法の 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;
};
于 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 に答える