javascript - 如何使用 Angular JS 正确地遍历数组元素？

Question

我想渲染一个表格，为数组中的每个对象添加行。

我有一个Controller，比如:

app.controller('SignUpController',function ($scope, $http) {

    var that = this 


    that.users = []


    that.queryUsers = function() {
        console.log("I'm being triggered")

        $http.get("/existingUsers").

        success(function (data,status,headers,config) {
            console.log(data)
            that.users = data
            console.log(that.users)
        }).

        error(function (data,status, headers, config) {
            console.log(status)
        })
    }

})

表格标记:

<table class="table table-bordered">
        <th ng-repeat="th in ['mail','Administrador','Miembro desde']">{{th}}</th>

        <tr ng-repeat="p in signup.users">
            <td>{{p._id}}</td>
            <td>{{p.mail}}</td>
            <td>{{p.admin}}</td>
        </tr>

</table>

Ttable 位于带有 ng-controller="SignUpController as signup" 的 div 中。当我单击一个按钮时，我触发了 queryUsers，实际上在浏览器控制台中看到了结果:

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]

mail 和 _id 都是每个对象的现有属性。

所以 AJAX 正在完成，我应该迭代并呈现为 HTML 行的数组实际存在并被填充，但没有显示任何行。

为什么？

编辑

我试过不修改作用域:

app.controller('SignUpController', function ($scope,$http) {

    $scope.users = []

    $scope.queryUsers = function() {
        
        console.log("I'm being triggered")

        $http.get("/existingUsers").

        success(function (data,status,headers,config) {
            console.log(data)
            $scope.users = data
            console.log($scope.users)
        }).

        error(function (data,status, headers, config) {
            console.log(status)
        })
    }

})


<div class="tab-pane" id="usecase11" ng-controller="SignUpController">
    
        <h3>Colaboradores</h3>

        <div class="row">
            
            <div class="col-sm-6">
                
                <table class="table table-bordered">
                        <th ng-repeat="th in ['mail','Administrador','Miembro desde']">{{th}}</th>

                        <tr ng-repeat="p in users">
                            <td>{{p._id}}</td>
                            <td>{{p.mail}}</td>
                            <td>{{p.admin}}</td>
                            <td style="border:none;"><a class="close" ng-click="">$</a></td>
                            <td style="border:none;"><a class="close" ng-click="">*</a></td>
                        </tr>

                </table>
            </div>
        </div>
</div>

但是，我再次看到在浏览器控制台打印了这样的数组，但没有呈现为 HTML

这是 证据 queryUsers 被调用并且 $scope.users 在它之后得到东西。

有趣的是，我在表格后面得到了:{{users}}，它显示的是一个空数组。

以防万一这是 GET 处理服务器代码:

app.get('/existingUsers',function (request, response) {

    
    membersCollection.find({},{"password":0}, function (err, data) {

        if (err) response.send(404)
        
        else {
            
            data.toArray(function (err, docs) {
                if (err) {
                    
                    console.log(error)
                    response.send("Error")
                }

                response.send(JSON.stringify(docs, null, 4))
            })
        }
    })
}

Answer 1

您不修改$scope。这是更正后的代码:

app.controller('SignUpController',function ($scope, $http) {

    $scope.users = []

    $scope.queryUsers = function() {
        console.log("I'm being triggered")

        $http.get("/existingUsers").

        success(function (data,status,headers,config) {
            console.log(data)
            $scope.users = data
            console.log($scope.users)
        }).

        error(function (data,status, headers, config) {
            console.log(status)
        })
    }

})

HTML:

<table class="table table-bordered">
    <th ng-repeat="th in ['mail','Administrador','Miembro desde']">{{th}}</th>

    <tr ng-repeat="p in users">
        <td>{{p._id}}</td>
        <td>{{p.mail}}</td>
        <td>{{p.admin}}</td>
    </tr>

</table>