2016-01-21 85 views
0

我是MEAN的開端,我有一個MEAN堆棧應用程序,它將數據拉入一個HTML頁面上的一個表,但現在我想從兩個mongo數據庫或集合中將數據拉入另一個表相同的頁面,但不知道什麼是最好的方式去做。我需要使用兩個ng控制器嗎?任何幫助非常感謝感謝。MEAN stack resfulAPI多個DBS /集合

HTML:

<div class="risklog" ng-controller="AppCtrl"> 
<table class="logs"> 
    <thead class="logheaders"> 
    <tr> 
     <th>RiskID</th>   
     <th>Description</th> 
     <th>Probability</th> 
     <th>Impact</th> 
     <th>Actions</th> 
     <th>Owner</th> 
     <th>RiskLevel</th> 
     <th>Action</th> 
     <th>&nbsp;</th> 
    </tr> 
    </thead class="logheaders"> 
    <tbody> 
    <tr> 
     <td><input ng-model="risk.RiskID"></td> 
     <td><input ng-model="risk.Description"></td> 
     <td><select ng-model="risk.Probability"> 
      <option value="High">High</option> 
      <option value="Medium">Medium</option> 
      <option value="Low">Low</option> 
     </td> 
     <td><select ng-model="risk.Impact"> 
      <option value="High">High</option> 
      <option value="Medium">Medium</option> 
      <option value="Low">Low</option> 
     </td> 
     <td><input class="form-control" ng-model="risk.Actions"></td> 
     <td><input class="form-control" ng-model="risk.Owner"></td> 
     <td><select class="form-control" ng-model="risk.RiskLevel"> 
      <option value="High">High</option> 
      <option value="Medium">Medium</option> 
      <option value="Low">Low</option> 
     </td> 
     <td><button class="btn-blue" ng-click="addRisk()">Add Risk</button></td> 
     <td><button class="btn-blue" ng-click="update()">Update</button>&nbsp;&nbsp;<button class="btn-blue" ng-click="deselect()"> Clear </button></td> 
    </tr> 
    <tr ng-repeat="risk in risklog"> 
     <td>{{risk.RiskID}}</td> 
     <pre><td>{{risk.Description}}</td></pre> 
     <td>{{risk.Probability}}</td> 
     <td>{{risk.Impact}}</td> 
     <td>{{risk.Actions}}</td> 
     <td>{{risk.Owner}}</td> 
     <td>{{risk.RiskLevel}}</td> 
     <td><button class="btn-red" ng-click="remove(risk._id)">Remove</button></td> 
     <td><button class="btn-orange" ng-click="edit(risk._id)">Edit</button></td> 
    </tr> 
    </tbody> 
</table> 

JS控制器

ar 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.risklog = response; 
    $scope.risk = ""; 
    }); 
}; 

refresh(); 

$scope.addRisk = function() { 
    console.log($scope.risk); 
    $http.post('/contactlist', $scope.risk).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.risk = response; 
    }); 
}; 

$scope.update = function() { 
    console.log($scope.risk._id); 
    $http.put('/contactlist/' + $scope.risk._id, $scope.risk).success(function(response) { 
    refresh(); 
    }) 
}; 

$scope.deselect = function() { 
    $scope.risk = ""; 
} 

}]); 

服務器JS

var express = require('express'); 
var app = express(); 
var mongojs = require('mongojs'); 
var db = mongojs('risklog', ['risklog']); 
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.risklog.find(function (err, docs) { 
    console.log(docs); 
    res.json(docs); 
    }); 
}); 

app.post('/contactlist', function (req, res) { 
    console.log(req.body); 
    db.risklog.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.risklog.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.risklog.findOne({_id: mongojs.ObjectId(id)}, function (err, doc) { 
    res.json(doc); 
    }); 
}); 

app.put('/contactlist/:id', function (req, res) { 
    var id = req.params.id; 
    console.log(req.body.name); 
    db.risklog.findAndModify({ 
    query: {_id: mongojs.ObjectId(id)}, 
    update: {$set: {RiskID: req.body.RiskID, Description: req.body.Description, Probability: req.body.Probability, Impact: req.body.Impact, Actions: req.body.Actions, Owner: req.body.Owner, RiskLevel: req.body.RiskLevel}}, 
    new: true}, function (err, doc) { 
     res.json(doc); 
    } 
); 
}); 

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

所有你需要做的就是創建一個服務提取數據,並指定數據模型的控制器,然後在你的HTML做任何你想要的數據,你用目前的設置,沒有更聰明;) – maurycy

+0

不知道如何做到這一點,找不到任何例子:/ – Luke

回答

2

就做同樣的方式你已經做了一組數據

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

var loadSomethingElse = function() { 
    $http.get('/somethingElse').success(function (response) { 
     console.log("I got the something else I requested"); 
     $scope.somethingElseOnScope = response; 
    }); 
}; 

,然後在HTML

<tr ng-repeat="something in somethingElseOnScope"> 
    <td>{{something.name}}</td> 
</tr> 
+0

謝謝,但然後我必須在服務器中創建另一個app.get? – Luke

+0

是的,是的,它必須,你的服務器應該回應'/ somethingElse'的數據,你還可以加載它嗎? :) – maurycy

+0

謝謝你得到它的工作! – Luke

相關問題