Перенос данных из HTML во внешний код Javascript

Question

У меня есть раскрывающийся список в коде HTML, который я заполняю с помощью angular. Я хочу выбрать выбранное значение этого раскрывающегося списка и отправить его в angular, чтобы angular извлекал данные из базы данных и заполнял их на той же HTML-странице. Ниже мой код.

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

на моей html-странице есть таблица, которую я хочу заполнить в соответствии со значением раскрывающегося списка.

Заранее спасибо

Answer 1

| предлагаем добавить атрибут ng-model в меню выбора, например,

ng-model="selectedValue"

Это будет содержать выбранное значение, и вы сможете получить доступ к этой переменной в вашем контроллере с помощью $scope.selectedValue Вам также следует добавить атрибут ng-change в ваше меню выбора, чтобы вы могли вызывать функцию всякий раз, когда выбрана опция.

HTML выберите код меню:

 <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>

В вашем главном контроллере

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

});