Consider adding an attribute called `isVisible` and utilizing `ngIf` or `ngShow` to toggle the visibility of div elements. Here's a straightforward 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("e;MainCtrl& quote;, MainCtrl);
}(this.angular));
I hope this explanation is helpful, and here is a live demo.
update:
If I understand correctly, you want all progress bars to appear when clicking the button. In that case, ensure to declare the `bar` variable in a higher element within the controller instead of using `ngInit`. It is also best practice to initialize variables in the controller. Here's a modified version of your coding demo implementing these changes.
update 2:
To clarify further, let's delve into some detailed steps:
In the HTML file, adjust the first two lines inside the body tag like so:
<body ng-app="app" ng-init="vari = [{_id: 2}, {_id: 5}]">
<div ng-controller="ExampleCtrl" ng-repeat="data in vari">
Edit them to the following format:
<body ng-app="app" ng-controller="ExampleCtrl">
<div ng-repeat="data in vari">
Within the JavaScript file, include this line:
$scope.vari = [{_id: 2}, {_id: 5}];
In summary, eliminate the ngInit directive, transfer the initialization to the controller to handle `$scope.bar`, and position the controller outside the ngRepeat scope for enhanced functionality.