Как показать выпадающий список после получения элементов списка в angularjs? - PullRequest
Новая
       5

Как показать выпадающий список после получения элементов списка в angularjs?

0 голосов
/ 12 марта 2020

Я пытаюсь показать выпадающий список после получения данных из базы данных. Я получаю данные списка из файла JavaScript, и я должен показать эти элементы списка в раскрывающемся списке. Когда страница загружается в первый раз, раскрывающийся список остается пустым. Но когда я получаю данные списка из базы данных и заполняю переменную angular для раскрывающегося списка, она обновляется в angular, но в DOM ничего не меняется. Раскрывающийся список остается пустым.

Это то, что я сделал до сих пор: в JavaScript, где я получаю список из базы данных. 

$.get("/ws/getList", dt, function (data) {
    var elem = angular.element(document.querySelector('[ng-app]'));
    var injector = elem.injector();
    var $rootScope = injector.get('$rootScope');
    $rootScope.$broadcast("listEvent", data);
});

В Angular контроллер, где я я пытаюсь заполнить переменную $scope для списка: 

$scope.listForDD = [];
$rootScope.$on("listEvent", function (event,pList) {

  $scope.listForDD = pList;
  console.log($scope.listForDD);

});

Это мой HTML код: 

<div class="d-flex justify-content-start">

<span style="margin-top: 6px;">Select student: </span>&nbsp;&nbsp;

<select class="form-control" id="listDropDown" style="width: 157px;">
    <option ng-repeat="l in listForDD" value="{{l.studentName}}">
      {{l.studentName}}
    </option>
</select>
</div>

Вот пример списка данных: 

[{ studentName: "Jane",age: 25}, { studentName: "John",age:18 }]

Я получаю данные в переменной scope, но раскрывающийся список не обновляется в HTML.

Ответы [ 2 ]

0 голосов
/ 12 марта 2020

Пожалуйста, попробуйте это. 

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<span style="margin-top: 6px;">Select student: </span>&nbsp;&nbsp;

<select class="form-control" id="listDropDown" style="width: 157px;">
    <option ng-repeat="l in listForDD" value="{{l.studentName}}">
      {{l.studentName}}
    </option>
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
     $scope.listForDD = [{ studentName: "Jane",age: 25}, { studentName: "John",age:18 }];

     $rootScope.$on("listEvent", function (event,pList) {
        $scope.listForDD = pList;
        console.log($scope.listForDD);

    });
    $rootScope.$broadcast("listEvent", [{ studentName: "Jaaane",age: 65}]);

});
</script>

</body>
</html>
0 голосов
/ 12 марта 2020

Имейте в виду, что лучший способ извлечения данных с сервера с AngularJS фреймворком - это использование встроенной в фреймворк службы $ http. Под капотом jQuery и AngularJS используется XHR API . 

var url = "/ws/getList";
var config = {params: dt};
$http.get(url, config)
.then(function(response) {
   $scope.listForDD = response.data;
   console.log($scope.listForDD);  
}).catch(function(response) {
   console.log("ERROR", response);
});

Служба $ http предоставляет API на основе обещаний, который интегрирован с контекстом выполнения фреймворка AngularJS и его циклом дайджеста. Он имеет встроенные крючки, которые облегчают юнит-тестирование.

AngularJS изменяет обычный поток JavaScript, предоставляя собственную обработку событий l oop. Это разбивает JavaScript на классический и AngularJS контекст выполнения. Только операции, которые применяются в контексте выполнения AngularJS, получат выгоду от AngularJS привязки данных, обработки исключений, отслеживания свойств и т. Д. c.

Для получения дополнительной информации см.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...