Dynamic show hide code for dynamic content angular js

Question

Run below code as it is, Code is working fine but i want the same functionality without polluting angularjs code.

<html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="newapp" ng-controller="newctrl">
        <div ng-repeat="x in names">
            <div  data-ng-click="toggleCompanyArr(['nav_' + x.id])"><a href="">This is id : {{x.id}}</a></div>
            <div id="nav_{{x.id}}" style="display:none">{{x.firstname}} {{x.lastname}}</div><br><Br><Br>
        </div>
    </body>

<script>
var app = angular.module('newapp',[]);
app.controller('newctrl', function($scope){
    $scope.names=[
        {"id":"1","firstname":"Akhilesh","lastname":"Kumar"},
        {"id":"2","firstname":"Aman","lastname":"Kumar"},
        {"id":"3","firstname":"Mithilesh","lastname":"Kumar"}
    ];  
    $scope.toggleCompanyArr = function(val){
        $("#"+val).toggle();    
    };
});
</script>
</html>

Pankaj Parkar · Accepted Answer · 2016-03-15 11:56:55Z

3

You don't need to use jQuery to show/hide div, you could simply use ng-show here.

For achieving this you need to add show flag on each element of the names collection (you don't necessary to add new show property to your collection, if you don't add show: false prop in your each names element, angular will take care of this), and toggle show flag on click of the element. Thereafter use x.show flag inside ng-show directive to show & hide div.

Basically on initial load x.show value either undefined or false so anyhow it is going to hide the all element content on load. When you click on element ng-click directive will flag to x.show = true and that element will get shown.

The other advantage behind this approach is, you could have state of your each element in its object.

Suppose you have akhilesh option selected then it will have {"id":"1","firstname":"Akhilesh","lastname":"Kumar", show: true}, & other will have show: false if those element are not clicked.

Markup

<div  data-ng-click="x.show = !x.show">
    <a href="">This is id : {{x.id}}</a>
</div>
<div ng-show="x.show">
    {{x.firstname}} {{x.lastname}}
</div>

Reference link

edited Mar 15, 2016 at 11:56

answered Jan 10, 2016 at 15:39

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Akhilesh Kumar Over a year ago

Hello Pankaj, Thanks for your quick reply but i have one query. As code is dynamic, How data-ng-click= x.show =!x.show wil bind with ng-show="x.show"?

Pankaj Parkar Over a year ago

@AkhileshKumar yes..the show property will get added to the x which is each element of ng-repeat, you could look at the updated answer

Akhilesh Kumar Over a year ago

its working fine..... thanks, But i did't got the concept. Please refer some link so that i will get the concept behind it or if possible please explain it.

AlainIb Over a year ago

you can use ngShow and ngHide

Pankaj Parkar Over a year ago

x means your current element of ng-repeat

|

Collectives™ on Stack Overflow

Dynamic show hide code for dynamic content angular js

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related