在angularjs中获取列表项后如何显示下拉列表？答案

【问题标题】：How to show a drop down list after getting list items in angularjs?在angularjs中获取列表项后如何显示下拉列表？
【发布时间】：2020-06-24 16:47:09
【问题描述】：

我试图在数据从数据库中获取列表后显示一个下拉列表。我从 JavaScript 文件中获取列表数据，并且我必须在下拉列表中显示这些列表项。首次加载页面时，下拉菜单保持空白。但是当我从数据库中获取列表数据并填充下拉列表的角度变量时，它会以角度更新，但在 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);
});

在我试图为列表填充 $scope 变量的 Angular 控制器中：

$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 中更新。

【问题讨论】：

有什么理由不使用内置的$http 服务？
@AnuragSrivastava 我不知道。我是新来的。如果有什么办法，请解释一下。任何事情都会有帮助

标签： jquery html angularjs drop-down-menu

【解决方案1】：

请记住，使用 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 服务提供了一个基于 Promise 的 API，它与 AngularJS 框架的执行上下文及其摘要循环集成在一起。它具有便于单元测试的内置钩子。

AngularJS 通过提供自己的事件处理循环来修改正常的 JavaScript 流程。这将 JavaScript 拆分为经典和 AngularJS 执行上下文。只有在 AngularJS 执行上下文中应用的操作才能受益于 AngularJS 数据绑定、异常处理、属性监视等。

有关详细信息，请参阅

【讨论】：

实际上我在获取数据方面没有遇到任何问题。我不能在角度中包含数据获取部分。它就是这样设计的。我必须从 javascript 文件中获取数据，然后将其发送到 agular 控制器。我也在角度控制器中获取 JSON 数据。但是在 html 中，它没有得到更新

【解决方案2】：

请试试这个。

<!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>

【讨论】：

我之前试过这个，效果很好。但我需要在获取数据后更新$scope.listForDD。
问题是，我的 ng-repeat 值在角度更新，但在 DOM 中它不会改变。我尝试了你的方法，如果我在加载 DOM 之前加载范围变量，它就可以工作。但我希望在加载 DOM 后更新它
它已经在代码中了。 DOM 被加载，然后我调用 webService“getList”从数据库中获取下拉菜单列表。然后我从 javaScript 广播它并在“$rootScope.$on”函数中填充角度变量“listForDD”。但更新后的值没有显示在 html
我已经更新了代码。更新列表后也可以正常工作。
它也可以在 DOM 中工作吗？因为如果您查看我的代码，我认为这也是我所做的。或者也许我错过了一些东西。你能告诉我差异吗，这对我很有帮助，DOM中没有任何更新:(