Dynamically hiding div generated by AngularJS

Question

Using this code I'm attempting to show hide dynamically generated divs. Each div should display a corresponding button that will show/hide that corresponding div. If I remove the code ng-show="isShown{{course.Id}}" then the div is displayed correctly so appears I'm not combining the id within ng-show correctly ?

plnkr : http://plnkr.co/edit/JbVz231UuPLVGbIFuiwJ?p=preview

src :

<!DOCTYPE html>
<html ng-app>

<head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
    <script>
        function myCtrl($scope, $window) {
            $scope.showHide = function(toShowOrHide) {
                console.log('showhide : ' + JSON.stringify(toShowOrHide))
            }
            $scope.vm = {};
            $scope.vm.Courses = [{
                Id: 1,
                Name: "Course 1",
                isShown1: true
            }, {
                Id: 2,
                Name: "Course 2",
                isShown1: true
            }];
            $scope.isShown1 = true
            $scope.isShown2 = true
        }
    </script>
</head>

<body ng-controller="myCtrl">
    <div>
        <div ng-repeat="course in vm.Courses">
            <div>
                <div ng-show="isShown{{course.Id}}" id={{course}}>
                    <label>{{course.Name}}</label>
                    <button ng-click="showHide(course)"> S/H </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

You are making this more difficult than it needs to be. Just reference the isShown1 property of each element. i.e. ng-show="course.isShown1". — Claies
– Claies, Commented Aug 18, 2017 at 20:53

Daniil · Accepted Answer · 2017-08-19 21:08:28Z

0

If i understand you right, you can make it like that:

<!DOCTYPE html>
<html  ng-app>
<head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

    <script >
        function myCtrl($scope,  $window) {

            var isCourseShown = {};

            $scope.isShown = function (cource) {
              var isShown = isCourseShown[cource.Id];
              if(isShown == null) {
                isCourseShown[cource.Id] = true;
                isShown = true;
              }
              return isShown;
            };
            $scope.showHide =  function(cource){
              var isShown = isCourseShown[cource.Id];
              isCourseShown[cource.Id] = !isShown;
            };

            $scope.vm = {};
            $scope.vm.Courses = [
              { Id: 1, Name: "Course 1"},
              { Id: 2, Name: "Course 2"}
            ];
        } 



    </script>
</head>
<body ng-controller="myCtrl">
    <div>  
        <div ng-repeat="course in vm.Courses">
            <div>
                <div ng-show="isShown(course)" id={{course}}>
                    <label>{{course.Name}}</label>
                    <button ng-click="showHide(course)">
                      S/H
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

plnkr: http://plnkr.co/edit/ue8n2u7fRoBKZoCMruXA?p=preview

edited Aug 19, 2017 at 21:08

answered Aug 18, 2017 at 21:30

Daniil

3462 silver badges14 bronze badges

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

3 Comments

Daniil Over a year ago

@Claies right too. But only if acceptable mix view data with business data.

blue-sky Over a year ago

your code does not show/hide as is - clicking S/H does not show and hide the corresponding div ? The showHide function requires updating ?

Daniil Over a year ago

@blue-sky, i have updated the code to show/hide work. No more changes needed. You can move S/H button from hiding block to leave button visible when course hidden.

Frederick Pham · Accepted Answer · 2017-08-19 08:12:57Z

<DOCTYPE html>
<html>
<head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

    <script >
        function myCtrl($scope,  $window) {

            $scope.showHide =  function(course){
                  course.isShow = !course.isShow;


            }

            $scope.vm = {};
            $scope.vm.Courses = [
              { Id: 1, Name: "Course 1", isShow: true},
              { Id: 2, Name: "Course 2", isShow: true}
              ];
        } 



    </script>
</head>
<body ng-controller="myCtrl">
    <div>  
        <div ng-repeat="course in vm.Courses" >
            <div>
                <div>
                    <label  ng-show="course.isShow">{{course.Name}}</label>
                    <button ng-click="showHide(course)">S/H</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Vivz · Accepted Answer · 2017-08-19 09:18:19Z

In your function call you can toggle the value of isShown1 and also you can change the text of the button (Show/Hide). You also have to keep the button outside the scope of ng-show. Otherwise, the button will also get hidden.

 var app = angular.module("app", []);
 app.controller("myCtrl", function($scope, $window) {
     $scope.showHide = function(course) {
         course.isShown1 = !course.isShown1;
         course.text = course.isShown1 ? 'Hide' : 'Show';
     }
     $scope.vm = {};
     $scope.vm.Courses = [{
         Id: 1,
         Name: "Course 1",
         isShown1: true,
         text: "Hide"
     }, {
         Id: 2,
         Name: "Course 2",
         isShown1: true,
         text: "Hide"
     }];
 });

<!DOCTYPE html>
<html ng-app="app">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
    <div>
        <div ng-repeat="course in vm.Courses">
            <div>
                <div ng-show="course.isShown1" id={{course.Id}}>
                    <label>{{course.Name}}</label>
                </div>
                <button type="button" ng-click="showHide(course)">{{course.text}}</button>
            </div>
        </div>
    </div>
</body>
</html>

Collectives™ on Stack Overflow

Dynamically hiding div generated by AngularJS

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related