Ng-show Ng-hide In Ng-repeat How To Click/trigger For Each Wrapped Block

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

Solution 1:

try like this. simple and clear.

var editer = angular.module('editer', []);
functionmyCtrl($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;
}

.containerheader {
  padding-bottom: 20px;
  border-bottom: 1px solid black;
}

ul,
input,
.container {
  padding: 10px;
}

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