Question

我是Angular 1的新手，因此我无法使用angular动态构建一个下拉框。

以下是我的代码

var app = angular.module('myApp', []);
app.controller('TestCtrl', function($scope, $http) {

我创建了一个onchange函数getTypeName（）并使用get方法传递了参数，并将结果检索为json。

 $scope.getTypeName = function (type) {
   $http.get('get-type-name', 
      { params: 
          {
            type: type
          }
      }).then(
          function(response){
            var data = response.data; 
            for(i = 0; i < data.length; i++) { 
                //code to build dropdown 
            }
          },
      );
  }
});

以下是我的回复，

[
  {"id":"001","name":"ABC"},                  
  {"id":"002","name":"DEF"},    
  {"id":"003","name":"GHI"}
]

我想使用for循环在get方法函数成功中使用此响应构建一个下拉框。请提供解决方案来解决此问题。

Answer 1

你确实喜欢这个在app.js

$scope.getTypeName = function (type) {
   $http.get('get-type-name', 
      { params: 
          {
            type: type
          }
      }).then(
          function(response){
            $scope.data = response.data; 

          },
      );
  }
});

你的HTML中的

 <select id="ddl" model="ddldata" typeof="text"required>
      <option data-ng-repeat="ProjectName in data" value="{{ProjectName.id}}" ng-bind={{ProjectName.name}}">
  </select>

Answer 2

以下是从http get https://plnkr.co/edit/7PS7LBBNZA2cNzMorrB9?p=preview

动态填充选择选项的示例

<select ng-model="selectedItem">
  <option ng-repeat="o in options">{{o.name}}</option>
</select>

$scope.getTypeName = function() {
 $http.get('https://jsonplaceholder.typicode.com/users').then(
  function(result) {
    $scope.options = result.data;
  },
  function(error) {
    console.log(error);
  }
);
};

Answer 3

你可以试试这个，

$scope.yourOptions = [];
$scope.getTypeName = function (type) {$http.get('get-type-name', 

  { params: 
      {
        type: type
      }
  }).then(
      function(response){
        var data = response.data; 
        $scope.yourOptions = data;
      },
  );

} }）;

in html，

<select class="form-control" ng-model="whatever"  >
<option ng-repeat="x in yourOptions " value="{{x.id}}">{{x.name}}</option>
                </select>

Angular 1：动态构建下拉框

3 个答案: