Angularjs文本/数据未显示

Angularjs text / data not showing up

本文关键字：显示 数据 文本 Angularjs      更新时间：2023-09-26

我正在构建一个非常基本的angular应用程序来学习。我的应用程序基本上加载一个用户列表，并在主页上打印所有用户，每个名称旁边都有一个复选框，还显示当前用户的数量。

用户列表似乎可以工作——我有11个用户，显示了11个复选框。然而，实际的文本并没有出现。users.length变量也显示为空。

这是我的core.js文件：

var userApp = angular.module('userApp', []);
userApp.controller("mainController", mainController);
function mainController($scope, $http) {
    $scope.formData = [];
    // when landing on the page, get all users and show them
    $http.get('/api/users')
        .success(function(data) {
            $scope.users = data;
            console.log(data);
            console.log(data.length);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

    // when submitting the add form, send the text to the node API
    $scope.createUser = function() {
        $http.post('/api/users', $scope.formData)
            .success(function(data) {
                $scope.formData = {} //clear the form so our user is ready to enter another user
                $scope.users = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };
}

这是我的index.html文件：

<html ng-app="userApp">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
    <title>Node/Angular Todo App</title>
    <!-- SCROLLS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
    <style>
        html                    { overflow-y:scroll; }
        body                    { padding-top:50px; }
    </style>
    <!-- SPELLS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
    <script src="core.js"></script>
</head>
<body ng-controller="mainController">
    <div class="container">
        <div class="jumbotron text-center">
            <h1>Users Count: <span class="label label-info"> {{ users.length }}</span></h1>
        </div>
        <div id="user-list" class="row">
            <div class="col-sm-4 col-sm-offset-4">
                <!-- loop over users -->
                <div class="checkbox" ng-repeat="user in users">
                    <label>
                        <input type="checkbox">{{ user.first_name }}
                    </label>
                </div>
            </div>
        </div>
        <!-- create users -->
        <div id="user-form" class="row">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <form>
                    <div class="form-group">
                        <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                        <input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text">
                    </div>
                    <!-- createUser() WILL CREATE NEW USERS -->
                    <button type="submit" class="btn btn-primary btn-lg" ng-click="createUser()">Add</button>
                </form>
            </div>
        </div>

    </div>
</body>
</html>

示例用户记录：

{
"id": 1,
"first_name": "Bruce",
"last_name": "Lee",
"email": "blee@email.com",
"password": "blee",
"created_at": "2016-01-08T21:49:18.337Z",
"updated_at": "2016-01-08T21:49:18.337Z"
},

数据也正确地控制台.log（）的

有人能帮忙吗？

提前感谢！

如果您想将用户数据接管到Angular，您应该在html中将{{ first_name }}修复为{{ user.first_name }} 。

这意味着每个标签获取的名称不是全局声明的，而是用户。


此外，您应该更好地在js代码中注册控制器。

在core.js 中

userApp.controller("mainController", mainController);
angular的$http服务应该返回一个响应对象，而不是原始数据。根据文档，这就是这个对象中的内容：

响应对象具有以下属性：

data–｛string|Object｝–使用转换函数转换的响应体。

status–｛number｝–响应的HTTP状态代码。

headers–｛function（[headerName]）｝–Header getter函数。

config–｛Object｝–用于生成请求的配置对象。

statusText–｛string｝–响应的HTTP状态文本。```

尝试将data.data分配给$scope.users变量，如下所示：

$http.get('/api/users')
    .success(function(data) {
        $scope.users = data.data; // <-------- here!!! (consider calling it response so you can use 'response.data'
        console.log(data);
        console.log(data.length);
    })
    .error(function(data) {
        console.log('Error: ' + data);
    });

快速编辑：您似乎也在使用旧的做事方式（.success和.error）。该服务返回一个promise，您应该使用.then来使用它。

示例

$http
    .get('/api/users')
    .then(function(response) {
        $scope.users = response.data;
    }, function(error) {
        console.log('Error: ' + error);
    });
相关文章：