Question

我一直试图让我的MEAN APP显示如何显示数据已成功输入的消息！我不是在起诉如何解决这个问题我是MEAN的新手，还在学习。

insert.html

<!DOCTYPE>
<html ng-app="myApp">
<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <title>Contact list app</title>
</head>

<body>
      <div class="container" ng-controller="AppCtrl">
        <h1>Contact List App</h1>


<table class="table">

<div class="row">
    <div class="form-group col-xs-5 col-lg-4">
         <label for="name">Name</label>
         <input type="text" class="form-control " ng-model="contact.name"/>
</div>
</div>

 <div class="row">
    <div class="form-group col-xs-5 col-lg-4 ">
        <label for="email">Email</label>
        <input type="text" class="form-control " ng-model="contact.email"/>
  </div>
 </div>
 <div class="row">
  <div class="form-group col-xs-5 col-lg-4 ">
       <label for="number">Number</label>
       <input type="text" class="form-control "ng-model="contact.number" />
  </div>
    </div>
<br>
   <div class="row">
        <button type="submit" class="btn btn-default" ng-click="addContact()">Add Contact</button>
   </div>
</table>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>

controller.js

var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
    console.log("Hello World from controller");

var refresh= function(){
  $http.get('/contactlist').success(function(response) {
    console.log("I got the data I requested");
    $scope.contactlist = response;
    $scope.contact = "";


 });
};

refresh();

$scope.addContact = function(){

console.log($scope.contact);
$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) {
  console.log(id);
  $http.get('/contactlist/' + id).success(function(response) {
    $scope.contact = response;
  });
};  

}]);

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 received 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

完成帖子请求后，您可以显示一条消息：

    $scope.addContact = function() {

      $http.post('/contactlist', $scope.contact).success(function(response) {

        alert(response);
        alert("Data Inserted");

        refresh();
      });

    };

当使用MEAN App输入数据时，如何使插入页面显示成功

1 个答案: