Question

我是MEAN堆栈的新手，我正在尝试制作一个简单的联系人应用程序。但是我的index.html中的ng-repeat不起作用。这是我的代码。文件是根据Express

提供的默认文件结构

的index.html

    <html ng-app="myApp" xmlns:ng="http://www.w3.org/1999/xhtml">
    <head>
     <title>First Application x</title>
     <!-- Latest compiled and minified CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

     <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"> </script>

    </head>
    <body>
     <div class="container" ng-controller="AppCtrl">
          <h1>Phone Directory</h1>
          <table class="table">
             <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Phone</th>
                  <th>Action</th>
                </tr>
             </thead>
             <tbody>
                <tr>
                     <td><input class="form-control" type="text" placeholder="Enter name"></input></td>
                     <td><input class="form-control" type="text" placeholder="Email"></input></td>
                     <td><input class="form-control" type="text" placeholder="Phone No." ></input></td>
                     <td><button class="btn btn-danger">Add Contact</button></td>
                </tr>
                <tr ng-repeat="contact in contactlist">
                   <td class="info">{{ contact.name }}</td>
                   <td class="info">{{ contact.email }}</td>
                   <td class="info">{{ contact.phone }}</td>
                   <td class="info">{{ contact.phone }}</td>
                </tr>
             </tbody>
          </table>
     </div>
     <script src="/javascripts/controllers/controller.js"></script>
    </body>
    </html>

controller.js

    var myApp = angular.module('myApp', []);

    myApp.controller('AppCtrl',['$scope', '$http', function($scope, $http){
    $http.get('/contactlist').success(function(response){
        $scope.contactlist = response;
        console.log(response);
        console.log("Hello World from controller");
    });

    }]);

index.js

    var express = require('express');
    var router = express.Router();

    /* GET home page. */

    router.get('/', function(req, res, next) {
    res.render('index', { title: '' });
    });

    router.get('/contactlist',function(req,res){
    person1={
        name: 'Tim',
        email: 'Tim@gmail.com',
        phone: '111 111 -1111'
    };
    person2={
        name: 'Tim cook',
        email: 'timcook@gmail.com',
        phone: '222 111 -1111'
    };
    person3={
        name: 'Tim Baron',
        email: 'barrontim@gmail.com',
        phone: '222 333 -1111'
    };
    var contactlist=[person1,person2,person3];
    res.json(contactlist);
    });

module.exports = router;

Answer 1

好的!!

从快递应用程序传递JSON字符串，所以当你在ajax调用中收到时它是JSON字符串，你需要解码到object.It可以使用JSON.parse（）函数完成。

用下面的行替换你的行

$scope.contactlist = JSON.parse(response);

希望这能解决你的问题。

ng-repeat在MEAN堆栈中不起作用

1 个答案: