将数据从 HTML 传输到外部 Javascript 代码

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

Answer 1

| suggest you add an ng-model attribute to your select menu eg

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.
  };

});