Transfering data from HTML to external Javascript code

Question

I have a dropdown in HTML code which I am populating using angular. I want the selected value of that dropdown and send it to angular so that angular fetch the data from database and populate in same HTML page. Below is my code.

index.html

<div ng-app="myApp" ng-controller="sourceController" >
    <select class = "mdb-select md-form "  aria-labelledby="dropdownMenuButton" id="sourcesByName">
        <option class ="dropdown-item"  ng-repeat="source in showsource">{{source}}  </option>
    </select>

</div>

index.js

var Report = angular.module('Report', []);
Report.controller('mainController', function($scope, $http) {
    $scope.showdata = {}

// I want data here

// Get home page
 $http.get('/api/v1/table')
    .success(function(data) {
         $scope.showdata = data;
         console.log(data);
     })
     .error(function(error) {
         console.log('Error: ' + error);
     });
});


// Get all sources
Report.controller('sourceController', function($scope, $http) {
$scope.showsource =[];
$http.get('/api/v1/sources')
   .success(function(data) {
      var l = data.length;
      data1=['Sources'];
      var i;
      for(i=0;i<l;i++){
         data1.push(data[i]["source"]);
      }
      $scope.showsource = data1;
    })
    .error(function(error) {
    console.log('Error: ' + error);
  });
});

there is an table in my html page which I want to populate according to the dropdown value.

Thanks in Advance

Perhaps create an angular scope-property "selectedValue", which is set in your get.success(...)-code and then reference the property with {{ selectedValue }}. Angular should pick up the change and re-render the new data. Or is that what you created showdata for? — Jeppe
– Jeppe, Commented Jan 23, 2019 at 13:34
Can you explain it a bit more.I am new to this and didn't understand what you just said. — Ayush Goyal
– Ayush Goyal, Commented Jan 23, 2019 at 13:36
Can you show more code i.e your ddlSelect() method and the showsource array? — Sarah
– Sarah, Commented Jan 23, 2019 at 13:40
I have added showsource but ddlSelect() is a method which I am using for same purpose to get data from HTML to JS file. — Ayush Goyal
– Ayush Goyal, Commented Jan 23, 2019 at 13:48
should i add another controller for dropdown id in .get method? — Ayush Goyal
– Ayush Goyal, Commented Jan 23, 2019 at 13:49

Sarah · Accepted Answer · 2019-01-23 14:18:27Z

2

| suggest you add an ng-model attribute to your select menu e.g

ng-model="selectedValue"

This will hold the value that is selected and you will be able to access this variable in your controller with $scope.selectedValue You should also add an ng-change attribute to your select menu so that you can call a function whenever an option is selected.

HTML select menu code:

 <select class="mdb-select md-form" ng-model="selectedValue" ng-change="selectSource()" aria-labelledby="dropdownMenuButton" id="sourcesByName">
    <option class="dropdown-item"  ng-repeat="source in showsource">{{source}}  </option>
 </select>

In your mainController

var Report = angular.module('Report', []);
Report.controller('mainController', function($scope, $http) {
  $scope.showdata = {};

  $scope.selectSource = function(){
    //This function will be called whenever a new option is selected.
    //log the selectedValue to check it
    console.log($scope.selectedValue);
    //perform http request here with the selectedValue in order to retrieve
    //the corresponding data from the database.
    //Once the data is retrieved, we update the $scope.showdata variable. The view will be automatically updated.
  };

});

answered Jan 23, 2019 at 14:18

Sarah

2,0133 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ayush Goyal Over a year ago

Hi Sarah, Thanks for your immediate response . However, I am getting undefined in $scope.selectedValue

Sarah Over a year ago

Oh i see. Are the options with the "source" data displaying properly firstly? And can you try adding the selectSource function to your sourceController instead?

Ayush Goyal Over a year ago

Thanks a lot !! It is working now.You are life saver.

Ayush Goyal Over a year ago

Hi Sarah, this is out of question but can I call another controller similar to this in selectSource function. Thanks in Advance

Sarah Over a year ago

Hi Ayush. Just to clarify: You want to call a function from another controller in the selectSource function? Unfortunately this isn't possible. What is contained in the other function?

|

Collectives™ on Stack Overflow

Transfering data from HTML to external Javascript code

1 Answer 1

HTML select menu code:

In your mainController

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML select menu code:

In your mainController

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related