[英]angularjs app: button needs to be clicked twice
我正在嘗試使用 angularjs 創建一個簡單的 crud 應用程序。 起點是一個按鈕，它從 rest API 獲取數據並提供一個數組，該數組使用ng-repeat進行迭代以創建具有多個結果的引導卡。 問題是，在開始時，我需要單擊兩次按鈕以顯示卡片，但是，盡管它使fetch成功並且要迭代的數組在第一次嘗試時填充了數據。 我無法弄清楚為什么會出現這種行為。
這是“工作”代碼，你能幫我一把嗎？
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/bootstrap@4.5.3/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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html>
在 Angular.js 中發出 http 請求的推薦方法是使用$http服務。 如文檔中所示
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Angular.js 是一個使用“The Angular 方式”支持實時變化檢測的框架。 它不知道在其范圍之外所做的更改（就像使用 javascript 時一樣）。 您可以使用手動檢測，但我不建議在這種特定情況下使用它。
AngularJS-使用$ anchorScroll后需要單擊兩次“后退”按鈕
[英]Angularjs - Back button needs to be clicked twice after using $anchorScroll
可以在加載時單擊“按鈕1”，然后需要單擊兩次“按鈕2”。 然后，還需要單擊兩次按鈕＃1
[英]Button #1 can be clicked on load, then Button #2 needs to be clicked twice. Button #1 then also needs to be clicked twice
在工作之前，需要單擊兩次按鈕，我希望只單擊一次
[英]Button needs to be clicked twice before working, I want it to be clicked just once
我的按鈕需要點擊兩次才能為第一次點擊渲染新組件 React
[英]My button needs to be clicked twice to render the new component for the first click React
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.