ng-在ng-repeat中顯示ng-hide如何為每個包裹的塊單擊/觸發

Question

如何單擊以僅隱藏/顯示被li包裹的div /類來隱藏/顯示div，現在，如果我單擊第一個項目，則兩個項目都將顯示。 有沒有像jQuery辦法只有檢查this在角？

在線樣本： http ： //jsfiddle.net/qp0x1zcc/

 <div ng-app="editer" ng-controller="myCtrl" class="container">
  <ul ng-repeat="item in items">
    <li ng-click="show = !show" ng-init='show = false'>
      <span ng-hide="show">{{item.name}}</span>
      <form ng-show="show">
        <input ng-model="item.name">
      </form>
    </li>
    <li ng-click="show = !show">
      <span ng-hide="show">{{item.d}}</span>
      <form ng-show="show">
        <input ng-model="item.d">
      </form>
    </li>
  </ul>
</div>

Answer 1

嘗試這樣。 簡單明了。

 var editer = angular.module('editer', []); function myCtrl($scope) { $scope.index = -1; $scope.index2 = -1; $scope.items = [{ name: "item #1", d: "names 1" }, { name: "item #2", d: "names 2" }, { name: "item #3", d: "names 3" }]; $scope.setIndex = function(item){ $scope.index = $scope.items.indexOf(item); $scope.index2 = -1; } $scope.setIndex2 = function(item){ $scope.index = -1; $scope.index2 = $scope.items.indexOf(item); } $scope.clearIndex = function(){ $scope.index = -1; $scope.index2 = -1; } } 

 .container { margin-top: 10px; font-family: arial; } .container header { padding-bottom: 20px; border-bottom: 1px solid black; } ul, input, .container { padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="editer" ng-controller="myCtrl" class="container"> <ul ng-repeat="item in items"> <li ng-click="setIndex(item)" ng-dblClick = "clearIndex()"> <span ng-show="index != $index">{{item.name}}</span> <form ng-show="index == $index"> <input ng-model="item.name"> </form> </li> <li ng-click="setIndex2(item)" ng-dblClick = "clearIndex()"> <span ng-show="index2 != $index">{{item.d}}</span> <form ng-show="index2 == $index"> <input ng-model="item.d"> </form> </li> </ul> </div>