CODEWITHSUNDEEP
javascriptangularjs
Daniel 976034
Daniel 976034

Reputation: 199

Angular JS. hide a div inside a ng-repeat

I don't know how to hide a progress bar which I have in a ng-repeat. I think I have to use ng-hide but maybe it doesn't work because I have many iterations and a div with the same ID for ng-hide. I want to show that div when the user clicks on a button.

How can I do this? thank you

Daniel.

Edit. To be honest, I didn't do it what I asked above because I expected other behavior of AngularJS but I've written now what I wanted on Plunker and it works.

What I wanted is (simplifying) two columns: one column with a button and the other one with a progress bar. If I clic on the button of that row, its progress bar is showed. I thought AngujarJS would show ALL progress bars because all bars have the same tag (ng-hide="bar", for example) and for that reason I opened this question. If someone needs the code, you can see it on Plunker http://plnkr.co/edit/S5b0Dk0Tz7eZCkkJw95j?p=preview

Seeing how AngularJS works, now I wonder how to hide the iteration whose id is 5 if I clic on the botton of iteration whose id is 3. How can I do this?

Thank you!

Upvotes: 1

Views: 1260

Answers (1)

Yahya KACEM
Yahya KACEM

Reputation: 2481

you could put an attribute isVisible and use ngIf or ngShow for showing and hiding divs here's an example.

HTML:

<div
  ng-app="app"
  class="main-content"
  ng-controller="MainCtrl as app"
>
  <header class="header">
    <button
      class="button"
      ng-click="app.showAll()"
    >
      Show all
    </button>
    <button
      class="button"
      ng-click="app.hideOdds()"
    >
      Hide odds
    </button>
  </header>
  <div class="elements-container">
    <p
      ng-if="thing.isVisible"
      ng-class="{
        even: thing.even,
        odd: thing.odd
      }"
      ng-repeat="thing in app.stuff"
    >
      {{thing.content}}
    </p>
  </div>
</div>

Javascript:

(function (angular) {
  var
    app  = angular.module('app',[]),
    MainCtrl = function ($scope) {
      var
        len,
        thing,
        i   = 100,
        app = this;
      app.stuff = [];
      app.showAll = function () {
        len = app.stuff.length - 1;
        for (; len >= 0; len -= 1) {
          app.stuff[len].isVisible = true;
        }
      };
      app.hideOdds = function () {
        len = app.stuff.length - 1;
        for (; len >= 0; len -= 1) {
          if ((app.stuff[len].content % 2) !== 0) {
            app.stuff[len].isVisible = false;
          }
        }
      };
      for (; i >= 0; i -= 1) {
        if((i % 2) === 0){
          thing = {
            even: true,
            content: i,
            isVisible: true
          };
        } else {
          thing = {
            odd: true,
            content: i,
            isVisible: false
          };
        }
        app.stuff.push(thing);
      }
    };
  app.controller("MainCtrl", MainCtrl);
}(this.angular));

Hope this help here's a live demo.

update:

If I understand correctly you want when you click the button all progress bars appears, if so you need just to make the declaration of the bar variable in a higher element inside the controller also it is a best practice to initialize variables in the controller instead of ngInit.
Here's a fork of your plunk that does that.

update 2:

OK, sorry if that was not clear enough here's a more detailed answer: In the HTML file the first 2 lines from the body tag used to be like this:

<body ng-app="app" ng-init="vari = [{_id: 2}, {_id: 5}]">
  <div ng-controller="ExampleCtrl" ng-repeat="data in vari">

I changed them to this:

<body ng-app="app" ng-controller="ExampleCtrl">
  <div ng-repeat="data in vari">

In the js file I just added this line:

$scope.vari = [{_id: 2}, {_id: 5}];

So basically I removed the ngInit directive and moved the initialization to the controller since we need to initialize the $scope.bar variable and the controller outside of the ngRepeat scope.

Upvotes: 1

Related Questions