Search code examples
angularjsvariablesangularjs-scopeangularjs-ng-repeat

How to make unique ng-model in ng-repeat


I want to make each test(ng-model) like test1, test2 unique in below code..

<div ng-repeat="item in Array">
  <div>{{item.Name}}</div>
  <a ng-click="openClose(test)>show/hide</a>
  <div ng-show="test">{{item.Des}}</div>
</div>

$scope.openClose = function (modalName) {
  $scope[modalName] = $scope[modalName] ? false : true;
}

Solution

  • You can maintain the show / hide using the $index value you get for each element when you use ng-repeat.

    angular.module('app',[]).controller('mainCtrl', function($scope){
       
        $scope.Array = [{Name:'abc'},{Name:'zzz'},{Name:'yyy'},{Name:'xxx'}];
        
        $scope.openClose = function (index) {
          if($scope.selectedValue == index){
            $scope.selectedValue = -1;
          }else{
          	 $scope.selectedValue = index;
          }
        }
        
    })
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app='app' ng-controller='mainCtrl'>
       <div ng-repeat="item in Array">
         <div>{{item.Name}}</div>
          <a ng-click="openClose($index)">show/hide</a>
         <div ng-show='$index === selectedValue'>Hide Show content</div>
      </div>
    </div>