Using Angular how to show/hide a div which is in ng-repeat

1
votes
HTML Markup:
            <div ng-repeat="item in items">
                <div class="dropdown-menu" ng-click=itemsActive()>click me</div>
                <ul ng-show="itemVisible">
                    <li>item 1</li>
                    <li>item 2</li>
                </ul>
            </div>

 Controller code:
            $scope.itemVisible = false;
            $scope.itemsActive = function(){
            $scope.itemVisible = !$scope.itemVisible;
        }

Above, is the markup where on ng-click I am calling a function itemsActive() and in controller I have a scope variable $scope.itemVisible = false. And, items dropdown is initially not shown by assigning ng-show = "itemVisible". So, onclick scope variable is toggled to true/false. But, since ng-repeat is used all repeated items 'dropdown-menu' divs are also getting toggled. How to achieve for a particular div show/hide ul items.

I edited my code HTML Markup:

<div ng-repeat="item in items">
     <div class="dropdown-menu" ng-click="item.visible=!item.visible>"click me</div>
        <ul ng-show="itemVisible">
             <li>item 1</li>
              <li>item 2</li>
          </ul>
  </div>

Now, on click, Item is toggled on/off. But, onclick of first item and second item the dropdown is visible. If I click on first item and click on second item then first item should be hidden?

2
angularjs

2 Answers

2
votes

You can first initialize an property for that item and than toggle that sepecific property on click

<div ng-repeat="item in items" ng-init="item.visible=true">
    <div class="dropdown-menu" ng-click="item.visible=!item.visible">click me</div>
    <ul ng-show="item.visible" >
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</div>

Demo:

angular.module('demo',[])
    .controller('demoCtrl',['$scope',function($scope){
        $scope.work = 'working';
        $scope.items = [{a:'a'},{a:'b'}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
    <div ng-repeat="item in items" ng-init="item.visible=true">{{work}}
        <div class="dropdown-menu" ng-click="item.visible=!item.visible">click me</div>
        <ul ng-show="item.visible" >
            <li>{{item.a}}</li>
        </ul>
    </div>
</div>
0
votes

You can use ng-if and only show the div if it doesn't match the specific item:

<div ng-repeat="item in items">
 <div class="dropdown-menu" ng-if="item != 'specificItem'" ng-click="item.visible=!item.visible>"click me</div>
    <ul ng-show="itemVisible">
         <li>item 1</li>
          <li>item 2</li>
      </ul>

If the ng-if condition is met, the html following in that block will show, if the condition is not met, it will not.