Tuesday 23 May 2017

Get selected value and pass to new page

I'm working on a website using a MEAN Stack. I'm trying to get a selected option from a selectbox where the options are stored in my MongoDB. Each of the options also have some other information that are not shown in the selectbox.

What I want to get done is getting the selected option and take this value to another page and show the value plus all other information that belongs to this option, in the other page

This is my selectbox:

<div class="searchbox" ng-controller="cityCtrl">
  <div class="plumber-by-city col-sm-6">
     <select>
       <option>Zoek loodgieter op plaatsnaam</option>
       <option ng-repeat="x in doc"></option>
     </select>
  </div>
</div>

This is how I get the data from MongoDB in Node:

var cityInfoSchema = new Schema ({
  city: String,
  phoneLG: String,
  phoneAV: String,
  phoneCV: String
}, {collection: 'citynames'});

var CityInfo = mongoose.model('CityInfo', cityInfoSchema);

router.get('/getdata', function(req, res, next){
  CityInfo.find()
    .then(function(doc){
    console.log('Data successfully retrieved');
    res.json(doc);
  });
});

And this is how I get the data on the frontend side with Angular:

angular.module('loodgietersApp').controller('cityCtrl',function($scope,$http){
 $scope.doc = [];

 $http.get('/getdata').then(function(d){
   console.log(d);
   $scope.doc = d.data;
 },function(err){
   console.log(err);
 });
});

And this is the page where I want the information of the selected item passed to and showed:

<div class="container plumbers" ng-controller="cityCtrl">
   <p>This is a sample text </p>
   <p>This is a sample text </p>
   <p>This is a sample text </p>
</div>



via Larsmanson

No comments:

Post a Comment