Toggle visibility in angular

Question

I’m trying to toggle the visibility of a div in angular This is my view:

<div ng-repeat="item in data  | orderBy:'address' | groupBy:'address'" >
    <h5 onclick="toggle_visibility('item1');">{{item.address}}</h5>
      <div id="item1">
           <ul>
               <li>First Name: {{item.firstname}}  </li>
           </ul>
      </div>

In controller:

$scope.data = [
        {
            firstname: "user",
            address: “address1”
        },
        {
            firstname: "user1",
            address: “address2”
        },
        {
            firstname: "user2",
            address: “address1”
        }
    ];

The issue is when I click on any address header it hides or shows the first name within the first header and it should be when I click on the address header it shows or hides the first name within that address header that I clicked on it. How can I fix this?

Gaurav Kumar Singh · Accepted Answer · 2017-03-08T19:32:05.990

0

Html

<div ng-repeat="item in data  | orderBy:'address' | groupBy:'address'" >
    <h5 ng-click="toggle_visibility(item);">{{item.address}}</h5>
      <div ng-hide="item.invisible">
           <ul>
               <li>First Name: {{item.firstname}}  </li>
           </ul>
      </div>

JS

$scope.toggle_visibility = function(item) {
    item.invisible = !item.invisible
}

edited Mar 08 '17 at 19:32

answered Mar 08 '17 at 19:21

Gaurav Kumar Singh

1,550
3
11
31

You should use ng-click instead of onclick in the html – Julien TASSIN Mar 08 '17 at 19:31
@Gaurav it's working! Thanks! But why groupBy is not working? it's not bringing the same addresses in the same group? – ITDeveloper Mar 08 '17 at 19:53
See this http://stackoverflow.com/questions/25921427/angular-ng-repeat-groupby-and-keep-order – Gaurav Kumar Singh Mar 08 '17 at 19:55
@Gaurav I did vote up it just doesn't show up because it says I have less than 15 reputation so it doesn't share publicly – ITDeveloper Mar 08 '17 at 20:20
Ok, no problem @ITDeveloper – Gaurav Kumar Singh Mar 08 '17 at 20:25

score 0 · Answer 2 · answered Mar 08 '17 at 19:28

add additional boolean property to array and assign that property to ng-hide. then inside click function change the boolean value of that property.

angular.module("app",[])
.controller("ctrl",function($scope){
 $scope.data = [
        {
            firstname: "user",
            address: "address1",
            hideAddress : false
        },
        {
            firstname: "user1",
            address: "address2",
            hideAddress : false
        },
        {
            firstname: "user2",
            address: "address3",
            hideAddress : false
        }
    ];
    
    $scope.toggle_visibility = function(item){
       item.hideAddress = !item.hideAddress;
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="item in data  | orderBy:'address' " >
    <h5 ng-click="toggle_visibility(item);">{{item.address}}</h5>
      <div ng-hide="item.hideAddress">
           <ul>
               <li>First Name: {{item.firstname}}  </li>
           </ul>
      </div>
    </div>
</div>

Toggle visibility in angular

2 Answers2