In my project, the red number div is a button, and I need to hide the numbers 100, 4, 9, and 14 when the button can be clicked, so I am using "display none" instead of "opacity:0".
How can I determine the number 100 div and hide it? I am unsure how to utilize ng-class or ng-hide to hide the number 4, 9, and 14 div elements.
Below is the code snippet:
.bigDiv {
width: 500px;
height: 500px;
margin: 400px auto;
background-color: black;
}
ul {
font-size: 0px;
padding-left: 0px;
}
.circle {
width: 20px;
height: 20px;
border-radius: 10px;
background-color: green;
position: relative;
}
.todo-last {
position: absolute;
width: 33px;
height: 33px;
background-color: red;
left: 25px;
top: 25px;
font-size: 25px;
color: white;
}
.bigDiv li {
display: inline-block;
width: 100px;
height: 100px;
background-color: purple;
}
<body ng-app="app" ng-controller="controller">
<div class="bigDiv">
<ul>
<li ng-repeat="todo in todoArray">
<div class="circle">
<div class="todo-last">
{{todo.text}}
</div>
</div>
</li>
</ul>
</div>
</body>
<script>
var app = angular.module('app',[]);
app.controller('controller',["$scope",function ($scope) {
var randomNum = Math.ceil(Math.random() * 15 + 1);
var array = [];
for(var i = 0 ; i < randomNum; i++){
if((randomNum -2)===i ){
array.push({
text: 100
});
continue;
}
array.push(
{text: i}
)
}
$scope.todoArray = array;
}])
</script>
Additionally, I only want to hide the red div.