Question

我在angularJS中有一个下拉列表，定义为：

$scope.Ids = [ {
                id : 'ID-100',
                name : 'ID-100'
            }, {
                id : 'ID-200',
                name : 'ID-200'
            }, {
                id : 'ID-300',
                name : 'ID-300'
            } ];
$scope.Id = $scope.Ids[0];

<select class="custom-select" ng-model="Id" ng-options="choice.name for choice in Ids"></select>

我的要求是从数据库动态填充这些ID。

我有一个弹簧控制器，可以调用数据库：

$http({
                        'url' : '/getIds',
                        'method' : 'POST',
                        'headers' : {
                            'Content-Type' : 'application/json'
                        },
                        'params' : data
                    }).then(function(response) {
                        $scope.Ids = response.data.Ids;
                    });

并产生一个列表：

["ID-100", "ID-200", "ID-300"]
0: "ID-100"
1: "ID-200"
2: "ID-300"

我的$ scope.Ids将具有新列表。我需要将此列表以下拉格式映射到我的$scope.Ids，并使下拉列表显示第一条记录。

有人可以提出实现此目标的想法吗？

Answer 1

您的代码已经正确，但是您的方法应如下所示。

演示

var app = angular.module('todoApp', []);

app.controller("dobController", ["$scope",
  function($scope) {
    
$scope.Ids = [{
                id : 'ID-100',
                name : 'ID-100'
            }, {
                id : 'ID-200',
                name : 'ID-200'
            }, {
                id : 'ID-300',
                name : 'ID-300'
            }];
            
$scope.Id = $scope.Ids[0];
}]);

<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="MainViewController.js"></script>
</head>


<body ng-controller="dobController">
  <select class="custom-select" ng-model="Id" ng-options="choice.name for choice in Ids"></select>
  <div>
    <h1> Selected one is : {{Id}} </h1>
    </div>
</body>

</html>

动态填充下拉列表-AngularJS

1 个答案: