javascript - Angular JS. hide a div inside a ng-repeat -

I do not know how to hide a progress bar for me ng-repeat . I think I have to use ng-hide but maybe this does not work because I have many iterations and div for the same code with ng -hide . I want to show that div when a user clicks on a button.

How can I do this? Thanks

Daniel

---

Edit To be honest, I did not do this because of what I said to it because I expected the other behavior of AngularJS, but now I have written what I wanted on the planker And it works.

What I needed was (simplified) two columns: one column with one button and another with progress bar. If I click on the button on that row, its progress bar has been shown. I thought AngujarJS would show all progress bars because all the time the same tag (ng-hidden = "bar", for example) and For this reason I opened this question. If someone needs a code, then you can see it on the plunker.

Seeing how fingerprints work, I now wonder how to run it, whose ID is 5, if I repeat Can you click on the boat whose ID is 3?

Thank you!

You can place a feature and use ngIf or ngShow to show and hide divs here Example.

HTML:

  & lt; Div ng-app = "app" class = "main-content" ng-admin = "main code as app" & gt; & Lt; header class = "header" & gt; & Lt; Button class = "button" ng-click = "app.showAll ()" & gt; All & lt; / Button & gt; Show & Lt; Button class = "button" ng-click = "app.hideOdds ()" & gt; Hide obstacles & lt; / Button & gt; & Lt; / Header & gt; & Lt; Div class = "element-container" & gt; & Lt; p ng- if = "thing.isVisible" ng-class = "{:: thing.even, weird: thing.odd}" ng-repeat = "talk in app.stuff" gt; {{Thing.content}} & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 javascript:  
  (function (angle) {var app = angular. Module ('app', []), maincut = function ($ scope) ) {Var len, thing, i = 100, app = this; app.stuff = []; app.showAll = function () {len = app.stuff.length - 1; (; len & gt; = 0; len For) - = 1) {app.stuff [len] .isVisible = true;}}; App.hideOdds = function () {len = app.stuff.length - 1; For (; lan> gt; = 0; len - = 1) {If ((app.stuff [len] .content% 2)! == 0 {{app.stuff [len] .isVisible = false;}} }; for (; i & gt; = 0; i - = 1) {If ((i% 2) === 0) {matter = {even: true, content: i, isisible: true}; } Else {thing = {odd: true, content: i, isisible: false}; } App.stuff.push (cheese);}}; app.controller ("MainCtrl", MainCtrl);} (this.angular));   
 Hope this help is here.  
 Update:  
 If I understand correctly, then you want to click on all the progress bars button, then you just have a high element inside the controller In order to announce the bar variable, it is a best practice to initialize the variable in the controller instead of NGIIT. 
 Here is one such thing.  
 Update 2:  
 OK, sorry if this was not clear enough, here's a more detailed answer: The first two lines of body tags in the HTML file are like this Are:  
  & lt; Body ng-app = "app" ng-init = "vari = [{_id: 2}, {_id: 5}]" & gt; & Lt; div ng-controller = "examplectrl" ng-repeat = "data in diversity" & gt;   
 I changed them to:  
  & lt; Body ng-app = "app" ng-controller = "ExampleCtrl" & gt; & Lt; Div ng-repeat = "data in diversity" & gt;   
 I just added this line to the JS file:  
  $ scope.vari = [{_id: 2}, {_id: 5}] ;   
 So basically I removed the ngInit instruction and took the controller into the controller because we need to start the  $ scope.bar  variable and the controller outside the NGREPT Is the scope of