[英]ng-repeat not working in MEAN stack
我是MEAN Stack的新手，我正在嘗試制作一個簡單的聯系人應用程序。 但是我的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;
好的！！
從express應用程序中，您正在傳遞JSON String，因此當您收到ajax調用時，它就是JSON String，您需要將其解碼為object。可以使用JSON.parse（）函數來完成。
用下面的一行替換您的行
$scope.contactlist = JSON.parse(response);
希望這能解決您的問題。
MEAN Stack-ng-repeat內部的ng-click不適用於數據庫
[英]MEAN Stack - ng-click inside of ng-repeat not working with database
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.