将数据从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>

在您的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.
  };

});