Javascript Ng重复不使用Flask，$scope.variablename=data.result在$.post API调用后超出范围_Javascript_Angularjs_Python 3.x_Flask_Angularjs Ng Repeat

Javascript Ng重复不使用Flask，$scope.variablename=data.result在$.post API调用后超出范围

javascript angularjs python-3.x flask

Javascript Ng重复不使用Flask，$scope.variablename=data.result在$.post API调用后超出范围,javascript,angularjs,python-3.x,flask,angularjs-ng-repeat,Javascript,Angularjs,Python 3.x,Flask,Angularjs Ng Repeat,我正在尝试使用ng repeat使用数据库中的数据填充一个表。在$.post调用$scope.variable\u name=data.result后，从flask获取数据，但它超出了范围，使ng repeat中使用的变量为null。因此，我在HTML标记中得到了空白我尝试声明一个全局$scope.variable1并从flask分配数据，但仍然不起作用 HTML代码： div class=“row card\u row margin-bottom-10”ng repeat=“用户数据中的项目

我正在尝试使用ng repeat使用数据库中的数据填充一个表。在

$.post

调用

$scope.variable\u name=data.result

后，从flask获取数据，但它超出了范围，使ng repeat中使用的变量为null。因此，我在HTML标记中得到了空白

我尝试声明一个全局$scope.variable1并从flask分配数据，但仍然不起作用

HTML代码：

div class=“row card\u row margin-bottom-10”ng repeat=“用户数据中的项目”>
{{item.name}
{{item.number}
{{item.email}

Javascript代码：


User.controller("UserController", function ($scope, $rootScope, $window, $http) {
    $scope.getUserDetails = function getUserDetails() {
        $.post('/getDetails', function (data) {
            $scope.userdata = data.result;
            console.log("log1: ",$scope.userdata);//second in console //prints 
             data
        });
        console.log("log2: ",$scope.userdata);//first in console //prints 
             null
    }
});

Python代码：

@app.route（'/getDetails'，methods=[“POST”，“GET”]）
def getDetails（）：
发送地址=[{'name'：'abcd'，'number'：1234567890，'email'：'abcd@abcd.com'}, 
{'name'：'efgh'，'number'：1234567890，'email'：'efgh@abcd.com'}, 
{'name'：'ijkl'，'number'：1234567890，'email'：'ijkl@abcd.com'}]   
返回jsonify（结果=发送）

我希望从flask传递到$scope的细节可以通过ng repeat使用，并以表格格式打印数据。但是我得到的输出是{{item.name}和其他{{}标记中的空格，因为$scope.userdata超出了范围

当前控制台输出：

log2：未定义
日志1:[{'name'：'abcd'，'number'：1234567890'，email'：'abcd@abcd.com'}, 
{'name'：'efgh'，'number'：1234567890，'email'：'efgh@abcd.com'}, 
{'name'：'ijkl'，'number'：1234567890，'email'：'ijkl@abcd.com'}]

所以log2正确地打印未定义的数据，因为post的结果是异步的，因此代码超出了$.post调用的范围，当响应到来时，它会被数据填充（并且会打印log1）

现在对于html部分，从外观上看，这是一个输入错误，因为您在控制器中的变量名为userdata，而在hmtl中的变量名为data。

因此，只需将$scope.userdata更改为$scope.data即可

看起来您正在使用jQuery的

$.post

方法进行ajax调用-有什么特殊原因吗？最好使用Angular的

$http.post

方法。下面是一个适用于我的代码版本：

<!-- get_details.html template -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
  <script>
    var User = angular.module('User', []);
    User.controller("UserController", function ($scope, $rootScope, $window, $http) {
      $scope.userdata = [];
      $scope.getUserDetails = function getUserDetails() {
        $http.post('/getDetails').then(function (data) {
          $scope.userdata = data.data.result;
          console.log("log1: ", $scope.userdata);//second in console //prints data
        });
        console.log("log2: ", $scope.userdata);//first in console //prints null
      };
    });
  </script>
</head>
{% raw %}
<body ng-app="User" ng-controller="UserController">
<button ng-click="getUserDetails()">Fetch userdata</button>
<div class="row card_row margin-bottom-10" ng-repeat="item in userdata">
  <div class="col-md-3">
    <span>{{ item.name }}</span>
  </div>
  <div class="col-md-3">
    <span>{{ item.number }}</span>
  </div>
  <div class="col-md-3">
    <span>{{ item.email }}</span>
  </div>
</div>
</body>
{% endraw %}
</html>


文件
var User=angular.module（'User'，[]）；
controller（“UserController”，函数（$scope、$rootScope、$window、$http）{
$scope.userdata=[]；
$scope.getUserDetails=函数getUserDetails（）{
$http.post（'/getDetails'）。然后（函数（数据）{
$scope.userdata=data.data.result；
console.log（“log1:，$scope.userdata）；//控制台中的第二个//打印数据
});
console.log（“log2:，$scope.userdata）；//控制台中的第一个//打印空值
};
});
{%raw%}
获取用户数据
{{item.name}
{{item.number}
{{item.email}
{%endraw%}

我不必对后端代码进行任何更改，只需对前端进行更改。

您想填充表格，但在HTML代码中，您有一个div而不是带有标记的表格，而不是$。post代码您应该有类似$scope.userdata.push的内容({name:$scope.newAgent.name，number:$scope.newAgent.number，email:$scope.newAgent.email}）；$.post用于flask API调用，该调用从数据库返回数据。为了减少代码，我没有添加数据库部分。因此，我们无法删除$.post部分。是否有其他解决方案？这是post中的错误，不是实际的代码。发布了类似的场景。更正了错误。是否有办法在$.post块完成其ex后呈现Html页面ecution？

$http

成功了。但是我必须传递参数，这样我才能工作。

$http（{url:'/getRoomDetails'，方法：“POST”，标题：{'Content Type'：'application/json'，数据：{'month:'month}）。然后（函数（数据）{$scope.room\u electricity=data.data.result；console.log（data.data.result）}）；

谢谢您的回复。