使用MEAN堆栈-查询MongoDB并将值作为变量传递

Question

I'm using the MEAN stack to create a web app. I have my server.js, console.js, a MongoDB called 'contactlist', and an index.html that contains Javascript for a tree diagram. What I would like to do is query my MongoDB for say, a key, and return with its value (or really just grab any information). I'd like to then save that value as a variable and pass it along to the javascript contained in my index.html.

This is the closest I've gotten reconstructing a tutorial's code. Using mongojs as my driver, I have this in my server.js:

app.get('/contactlist', function (req, res) {
console.log("I received a GET request")

db.contactlist.find({email:"bob11@email.com"},function(err, docs) {
//looks at the contact list database for anything with the email of bob11@email.com
    console.log(docs);
    res.json(docs);
});
});

In my controller:

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 = "";
});
};

The use of the ng-repeat function below is an artifact of the original application's use (display a list of all contacts). Now I just want one value, but I don't know what function to use. Here's my index.html:

<div class="container" ng-controller="AppCtrl">
    <table class="table">
        <thead>
            <tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contactlist">
                <td>{{contact.name}}</td>
                <!-- grabs the name from parameters set out in server.js -->
            </tr>
        </tbody>
    </table>
</div>

This displays the name ("Bob") of the email I filtered for (bob11@email.com) onto the webpage. At this point, even just being able to save that name as a variable and pass it along to the javascript would help. Ng-repeat is definitely not what I want to use, but I'm new to programming and the MEAN stack so I'm kind of stuck.

Thanks.

Answer 1

I'm not totally sure what you're asking, But I'll try to help out.

If you're asking how to edit the contact.name variable on the client, you should probably familiarize yourself with Angular's two way data binding . This means that any change to $scope in the controller will affect the data displayed in the HTML, and any change to a variable in the html will be applied to $scope.

For example, if you want to edit the contact.name on a page, you could use an input text field bound to contact.name as its model. To do that, we'll need ng-model to make a bridge between the input field and the value we want to change. that might look something like this

  <ul>
    <li ng-repeat="contact in contactlist">
      Name: <input type="text" ng-model="contact.name"/>
    </li>
  </ul>

We can then add an ng-change attribute to the input to perform an action on change. See working demo here

Answer 2

First solution: you can use ng-init for in your html page and binding mechanism something like this

<div ng-init="param='value';">
    <div ng-controller="yourController" >
        <label>param: {{value}}</label>
    </div>
</div>

now whatever parameter you are using in html file is available to your controller function

function yourController($scope) {
        console.log($scope.param);
}

second solution: you can make a service for passing the value in controller something like this

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

app.factory('valuepassing', function() {

    var myvaluepassingService = {};
         data =[];
    myvaluepassingService.addvalue = function(value) {
        data.push(value);
    };
    myvaluepassingService.removevalue = function(value) {
        var index = data.indexOf(value);
        data.splice(index, 1);
    };
    myvaluepassingService.data = function() {
        return data;
    };

    return myvaluepassingService;
});

function MyCtrl($scope, valuepassing) {
    $scope.newvalue = {};
    $scope.valuepassing = valuepassing;    
}