代码之家 › 专栏 › 技术社区 › Ayush Goyal

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

angularjs html javascript

Ayush Goyal · 技术社区 · 6 年前

我在HTML代码中有一个下拉列表,我正在使用angular填充它。我需要下拉列表的选定值,并将其发送到Angular,以便Angular从数据库中获取数据并填充到相同的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>

索引文件

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页面中有一个表,我希望根据下拉值填充它。

提前谢谢

1 回复 | 直到 6 年前

Sarah 6 年前

|建议您在选择菜单中添加一个ng模型属性,例如

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

});

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前