包含API和MONGOOSE的简单网络SPA(ID为问题)

时间:2015-04-26 10:03:36

标签: javascript html angularjs express mongoose

我正在创建一个非常简单的AnjularJS SPA,通过API连接到Mongoose。该应用程序将只接受一个新成员,显示新成员,如果我点击列表中的成员名称,我应该能够在另一个屏幕上编辑该成员。

但是当我点击一个成员名称进行编辑时,它并没有给我另一个页面上的成员进行编辑,就像我无法指定要编辑的正确成员一样。当我将鼠标悬停在成员名称上时,我希望看到该成员的Mongoose的id,但我只看到:

localhost:4000 /#/ members /(我想我应该看到(带有来自Mongoose的id)????:localhost:4000 /#/ members / 553778bb92de243be1c61c6d)

我的索引在哪里出错' s / id'

这是我的members.html页面,用于显示成员列表,当我点击成员名称来编辑该成员时,我应该可以移动到新页面,但我不能。见" {{memb.name |大写}}"下面...

members.html

 <div class="col-sm-7 col">
<div class="CSSTableGenerator" >
<h2 align="center">Registered Club Members</h2>

  <table>
    <tr><td>Name</td><td>Address</td><td>Age</td><td>Level</td><td>Able To       
 Swim</td><td>Email</td><td>Registration Date</td></tr> 
          <tr ng-repeat="memb in members" >
            <td>
              <a href="#/members/{{member._id}}">{{memb.name | uppercase}}     
 </a>
            </td>
            <td>
              {{memb.address }}
            </td>
            <td>
              {{memb.age }}
            </td>
            <td>
              {{memb.level }}
            </td>
            <td>
              {{memb.swimmer }}
            </td>
            <td>
              {{memb.email }}
            </td>
            <td>
              {{memb.regdate }}
            </td>
     </tr>
   </table>
 </div>
 </div>

我的APP.JS:

var app = angular.module("myApp",['ngRoute'])
app.config(function ($routeProvider) {
    $routeProvider
        .when('/members',
            {
                controller: 'MembersController',
                templateUrl: './partials/members.html'
            })
        .when('/members/:member_index',
            {
                controller: 'MemberDetailController',
                templateUrl: './partials/member_edit.html'
            })

        .when('/home',
            {
                //controller: 'MembersController',
                templateUrl: './partials/home.html'
            })
        .otherwise({ redirectTo: '/home' });
   })


  app.factory('SimpleFactory', ['$http', function($http){

    var factory = {};
    var members =  $http.get('/api/members') 

    factory.getMembers = function () 
    {
        //return members;
        return members = $http.get('/api/members');
    }

   factory.getMember = function (member_id) {
           return  members[member_id] = $http.get('/api/members/' +     
member_id )
    }



    factory.addMember = function(member) {
         return $http.post('/api/members',member)
    }
    factory.updateMember = function(member_id,member) {
         return $http.put('/api/members/' + member_id, member)
    }


    return factory;
   }])


app.controller('MembersController', ['$scope','SimpleFactory',
   function ($scope,SimpleFactory) {

    SimpleFactory.getMembers()
    .success(function(members) {
    $scope.members = members;
    });


$scope.addMember = function()
{
    var member = {
        name: $scope.newMember.name,
        address: $scope.newMember.address,
        age : $scope.newMember.age,
        level : $scope.newMember.level,
        swimmer : $scope.newMember.swimmer,
        email : $scope.newMember.email,
        regdate : $scope.newMember.regdate,
                }

      SimpleFactory.addMember(member)
      .success(function(added_member) 
      { 
         $scope.members.push(added_member);
         $scope.newMember = { }
      }       );
}

}])



app.controller('MemberDetailController',      
['$scope','$location','$routeParams','SimpleFactory',
 function ($scope,$location,$routeParams,SimpleFactory) {
SimpleFactory.getMember($routeParams.member._id).then(function(data){
$scope.member = {  
  index : $routeParams.member._id, 
  detail : data.user
};
});


$scope.updateMember = function() {
SimpleFactory.updateMember($scope.member._id, $scope.member.detail)
.then(function(data) {
    $location.path('/members')
});
};

}])

我的INDEX.JS

var express = require('express');
var controller = require('./members.controller');

var router = express.Router();

router.get('/', controller.index);
router.get('/:id', controller.show);
router.post('/', controller.create);
router.put('/:id', controller.update);

module.exports = router;

我的会员.MODEL.JS

var mongoose = require('mongoose')
 var Schema = mongoose.Schema;
  var MemberSchema = new Schema({
  name: String,
  address: String,
  age: String,
  level: String,
  swimmer: String,
  email: String,
  regdate: String
});

module.exports = mongoose.model('members', MemberSchema);

我的会员.CONTROLLER.JS

var _ = require('lodash')
var Member = require('./member.model'); 

function handleError(res, err) {
  return res.send(500, err);
}

// Get list of members
exports.index = function(req, res) {
  Member.find(function (err, members) {
    if(err) { return handleError(res, err); }
    return res.json(200, members);
  });
} ;

// Creates a new member in datastore.
exports.create = function(req, res) {
  Member.create(req.body, function(err, member) {
    if(err) { return handleError(res, err); }
    return res.json(201, member);
  });
};


exports.show = function(req, res) {
    Member.findById(req.params.id, function (err, member) {
        if(err) { return handleError(res, err); }
        return res.json(200, member);

    });
} ;

// Update an existing member in datastore.
exports.update = function(req, res) {
   Member.findById(req.params.id, function (err, member) {
        member.name = req.body.name
        member.address = req.body.address
        member.age = req.body.age
        member.level = req.body.level
        member.swimmer = req.body.swimmer
        member.email = req.body.email
        member.regdate = req.body.regdate
        member.save(function (err) {
            if(err) { return handleError(res, err); }
            return res.send(200, 'Update successful');
        });
    });
 }

任何人都可以帮忙吗?这是一个简单的APP,但我只是在学习,现在完全被困在这里!

由于

1 个答案:

答案 0 :(得分:1)

member.html中的a代码应绑定到memb._id,而不是members._id。像这样:

<a ng-href="#/members/{{memb._id}}">{{memb.name | uppercase}}</a>