In my attempt to develop a simple CRUD app using AngularJS, I encountered an issue. The initial step involves clicking a button that fetches data from a REST API and populates an array. This array is then iterated using ng-repeat to generate Bootstrap cards with the search results. Oddly enough, I have to click the button twice for the cards to be displayed. Despite the first attempt successfully fetching the data and filling the array, I can't seem to understand why this double-click behavior occurs.
Below is the code in question; any assistance would be greatly appreciated:
var app = angular.module("myModule", []);
app.controller("firstCtrl", function($scope) {
$scope.showButton = true;
$scope.arr;
$scope.$on('myEvent', function(event, data) {
$scope.arr = data.fromServer.results;
console.log($scope.arr)
});
$scope.back = function(){
$scope.arr = [];
}
$scope.delPerson = function(person,$index){
$scope.arr.forEach( personInArray => {
if(personInArray.id == person.id){
$scope.arr.splice($index,1)
console.log($index)
}
});
}
$scope.newNameFirst;
$scope.newNameLast;
$scope.p;
$scope.editPerson = function(person, $index){
$scope.newNameFirst = ""
$scope.newNameLast = ""
$scope.p = person
console.log($scope.p)
}
$scope.reWriteUser = function(){
$scope.p.name.first= $scope.newNameFirst;
$scope.p.name.last= $scope.newNameLast;
}
});
app.controller("secondCtrl", function($scope) {
$scope.fromServer;
$scope.submit = async function() {
let one = await fetch('https://randomuser.me/api/?results=9')
let two = await one.json();
$scope.$emit('myEvent', {
fromServer: two
});
$scope.showButton = !$scope.showButton;
}
});.fa-times-circle:hover{
cursor:pointer;
}
.botones{
display: flex;
justify-content: space-between;
}
.rep{
background: cadetblue;
border-radius: 12px;
padding: 10px;
margin-left: 5px;
text-align: -webkit-center;
text-align:center;
display: inline-grid;
justify-content: center;
align-items: center;
}<!DOCTYPE html>
<html>
<head>
<title>Anidando componentes</title>
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfef3f3e8efe8eefdecdca8b2a9b2af">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</head>
<body>
<div ng-app="myModule">
<!--parent div-->
<div ng-controller="firstCtrl" class="container">
<div class="row">
<div class="col text-center">
<h3>Anidando componentes</h3>
</div>
</div>
<div class="row">
<div class="col rep mt-3" ng-repeat="person in arr">
<div class="botones">
<i class="fas fa-times-circle" ng-click="delPerson(person,$index)" ></i>
<i class="fas fa-edit" ng-click="editPerson(person,$index)" data-toggle="modal" data-target="#exampleModal"></i>
</div>
<div class="card mt-3" style="width: 10rem;" style="display:inline-block">
<img src="{{person.picture.thumbnail}}" class="card-img-top" alt="person.name.first">
<div class="card-body">
<p class="card-text">{{person.name.first}} {{person.name.last}}</p>
</div>
</div>
</div>
</div>
<!--child div-->
<div ng-controller="secondCtrl">
<button type="button" class="btn btn-primary" ng-click="submit()" ng-if="showButton">Show users</button>
<button type="button" class="btn btn-primary" ng-click="back()" ng-if="!showButton">Back</button>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="text" name="newName" id="newNameFirst" ng-model="newNameFirst">
<input type="text" name="newName" id="newNameLast" ng-model="newNameLast">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="reWriteUser()" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./app.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b4aeb5aeb3">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>