调用 HTTP get 方法以使用 angular JS 在下拉列表中填充结果

calling a HTTP get method to populate the result in drop down using angular JS

本文关键字：JS 下拉列表 结果 填充 angular get HTTP 方法 调用      更新时间：2023-09-26

我在一个地方定义了所有控制器。

 $routeProvider.when(pages.hello, 
    {
      templateUrl: 'test/hello.html', 
      controller: 'myController',
      access: access.anon,
      helloPage: 'arf'
    });

我的你好.html看起来像这样。

<select name="chooseFunc" data-ng-model="choosenFunction"  class="input-xlarge ng-pristine ng-valid" data-ng-click="fetchID()"  data-ng-change="update(choosenFunction)">
            <option value="ABCD">ABCD</option>
            <option value="CDEF">CDEF</option>            
        </select>

现在我想调用一个 http get 方法"/abc/hello"来填充下拉列表，例如 ABCD、基于它的 CDEF 值。

我写过这样的东西。

 $scope.fetchID = function() {
        console.log("hello in fectch id"); 
        $http.get('/abc/hello').success(successCallback).error(error);        
      };

我的函数没有被调用。有些人可以帮助我解决以下问题。

  1. 在页面加载时调用 fecthID（） 函数。
  2. fechID（） 函数应该填充 select 元素中的选项。

我是新来的。有人可以帮我吗？

我会像这样写控制器：

function myController($scope,$http) {
    $scope.values = [{id:"ABCD",Name:"David"},{id:"CDEF",Name:"John"}];
    $scope.selectedItem = $scope.values[0].id;
     $scope.fetchID = function() {
        $http.get('/abc/hello').success(
            function(data, status, headers, config){
                $scope.values.push(data);// play here
            }) 
        .error(error);          
      };
 $scope.fetchID(); // call
}

以及具有 init 第一个组合值的hello.html： 

   <select name="chooseFunc"        
    ng-model="selectedItem"        
     ng-options="selectedItem.id as selectedItem.id for selectedItem in values"          
     class="input-xlarge ng-pristine ng-valid"          
     data-ng-click="fetchID()"          
      data-ng-change="update(choosenFunction)"          
      ></select>
您可以使用

ng-options填充选择喜欢

<select ng-model="mySelecetdValue" ng-options="item for item in items">
</select>

叫fecthID()，就这样叫

$scope.fetchID()

并在successCallback函数中填充items

相关文章：