Динамически заполненный выпадающий список - AngularJS - PullRequest
Новая
       4

Динамически заполненный выпадающий список - AngularJS

0 голосов
/ 11 января 2019

У меня есть раскрывающийся список 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>

Мое требование - динамически заполнять эти идентификаторы из БД.

У меня есть контроллер пружины, который делает вызов в БД: 

$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 в раскрывающемся формате и сделать так, чтобы в раскрывающемся списке отображалась первая запись.

Может кто-нибудь дать представление о том, как этого добиться?

1 Ответ

0 голосов
/ 11 января 2019

Ваш код уже правильный, однако ваш подход должен быть таким, как показано ниже.

DEMO 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...