Angular JS. hide a div inside a ng-repeat
Question
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!
1 answers
solution1
1 ACCPTED 2014-04-22 10:28:33
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.