ng-show ng-hide in ng-repeat如何點擊/觸發每個包裝塊

Question

如何點擊隱藏/顯示divs只是包裝在li中的divs/class，現在如果點擊第一個項目，項目成爲展示。有沒有像jQuery的方式來檢查在Angular中的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>