Question

我是MongoDB的新手（以及一般的编码），我试图创建一个简单的联系人列表应用程序，但我遇到了一个问题。我无法使用“编辑”按钮。具体来说，它在controller.js中的$ scope.edit似乎并没有起作用。我尝试了两种不同的方式：

这里是server.js：

app.get('contactList/:id', function (req, res) {
    var id = req.params.id;
    console.log(id);
    db.contactList.findOne({_id: mongojs.ObjectId(id)}, function(err, doc) {
        res.json(doc);
    });
})

这里的controller.js（第一种方法）：

$scope.edit = function(id) {
    // Displays the user ID in the browser console
    console.log(id);
    $http.get('/contactList/' + id).success(function(response) {
        $scope.contact = response;
    });
}

在我的浏览器中，我收到此错误：

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (57fa05975770e4ae924269ba, line 0)

我尝试将controller.js更改为此（第二种方法）：

$http.get('/contactList/' + id).then(success, fail);
function success(response) {
    console.log("Success!");
}

function fail(err) {
    console.log(err.message);
}

我收到此错误消息：

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (57fa05975770e4ae924269ba, line 0)
[Log] undefined (controller.js, line 53)

这是我的完整index.html文件：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Contact List App</title>

    <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">
</head>
<body>

    <div class="container" ng-controller="AppCtrl">
        <h1 align="center">Contact List Header</h1>

        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Number</th>
                    <th>Action</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input class="form-control" ng-model="contact.name" type="" name="">
                    </td>
                    <td>
                        <input class="form-control" ng-model="contact.email" type="" name="">
                    </td>
                    <td>
                        <input class="form-control" ng-model="contact.number" type="" name="">
                    </td>
                    <td>
                        <button class="btn btn-primary" ng-click="addContact()">Add Contact</button>
                    </td>
                    <td>
                        <button class="btn btn-info" ng-click="update()">Update</button>
                    </td>
                </tr>
                <tr ng-repeat="contact in contactList">
                    <td>{{contact.name}}</td>
                    <td><a href="mailto:{{contact.email}}">{{contact.email}}</a></td>
                    <td><a href="tel:{{contact.number}}">{{contact.number}}</a></td>
                    <td>
                        <button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button>
                    </td>
                    <td>
                        <button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script type="text/javascript" src="controllers/controller.js"></script>
</body>
</html>

我的完整controller.js文件：

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

myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {   
    var refresh = function() {
        $http.get('/contactList').then(success, fail);

        function success(response) {
            console.log("I got the data I requested");
            $scope.contactList = response.data;
            $scope.contact + "";
        }

        function fail(err) {
            console.log(err.message);
        }
    }

    refresh();

    $scope.addContact = function() {
        // This adds the contact info to the console in the browser
        console.log($scope.contact);

        // This posts the contact info to the server, which can be viewed in terminal
        $http.post('/contactList', $scope.contact).success(function(response) {
            console.log(response);
            refresh();
        });
    }

    $scope.remove = function(id) {
        console.log(id);
        $http.delete('/contactList/' + id).success(function(response) {
            refresh();
        })
    }

    $scope.edit = function(id) {
        // Displays the user ID in the browser console
        console.log(id);
        // $http.get('/contactList/' + id).success(function(response) {
        //  $scope.contact = response;
        // });

        $http.get('/contactList/' + id).then(success, fail);
        function success(response) {
            console.log("Success!");
        }

        function fail(err) {
            console.log(err.message);
        }
    }

    // $scope.update = function() {
    //  console.log($scope.contact._id);
    //  $http.put('/contactList/' + $scope.contact._id, $scope.contact)
    // }
}]);

我的完整server.js文件：

var express = require('express');
var app = express();
var mongojs = require('mongojs');
var db = mongojs('contactList', ['contactList']);
var bodyParser = require('body-parser');

app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());

app.get('/contactList', function (req, res) {
    console.log("I got a GET request");

    db.contactList.find(function (err, docs) {
        console.log(docs);
        res.json(docs);
    });
})

app.post('/contactList', function (req, res) {
    console.log(req.body);
    db.contactList.insert(req.body, function(err, doc) {
        res.json(doc);
    })
});

app.delete('/contactList/:id', function (req, res) {
    var id = req.params.id;
    console.log(id);
    db.contactList.remove({_id: mongojs.ObjectId(id)}, function(err, doc) {
        res.json(doc);
    });
})

app.get('contactList/:id', function (req, res) {
    var id = req.params.id;
    console.log(id);
    db.contactList.findOne({_id: mongojs.ObjectId(id)}, function(err, doc) {
        res.json(doc);
    });
})

app.listen(3000);
console.log("Server running on port 3000");

当我点击“编辑”按钮时，我应该可以编辑联系人，但它没有这样做。有人可以帮忙吗？

Answer 1

在server.js中，尝试在＆＃34; contactList /：id＆＃34;之前添加斜杠（＆＃34; /＆＃34;），并确保server.js正在运行。此外，请确保您在单独的终端中运行mongod。

$ scope.edit在使用MongoDB

1 个答案: