ng-show ng-verstecken in ng-wiederholen, wie für jeden umhüllten Block klicken/triggern

Question

Wie klicken zum Verstecken/Anzeigen divs nur die divs/Klassen, die in li verpackt sind, jetzt, wenn ich auf den ersten Artikel, beide klicken Gegenstände werden gezeigt. Gibt es einen Weg wie jQuery, um nur this in Angular zu überprüfen?

Online Beispiel: 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

wie dies versuchen. einfach und klar.

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>