ng-show ng-hide in ng-repeat how to click/trigger for each wrapped block

Question

How to click to hide/show divs just those divs/classes which are wrapped in li , now if I click the first item, both items become to show. Is there a way like jQuery to just check this in Angular ?

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

try like this. simple and clear.

 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>