如何告诉angularjs下拉列表刷新

How can I tell an angularjs dropdown to refresh?

本文关键字：刷新 下拉列表 angularjs 何告诉      更新时间：2023-09-26

我有一个按钮，点击后会显示下拉列表。单击下拉列表中的每个元素都会生成一个ui对话框。打开ui后，会选中下拉列表中的相应项目。再次单击下拉列表中的元素将关闭对话框，并在列表中取消选中它。

也可以使用对话框上的"X"按钮关闭对话框。我需要这个关闭操作来取消选中下拉列表中的相应元素。这就是我在控制器里的东西：

<div class="dropdown">
    <button type="button" class="btn btn-default dropdown-toggle" style="width:100px">
      <img src="/UIDemo/images/maps-icon.png" style="padding-right:3px" />
       Data Grid 
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" ng-click="showRouteFeature = !showRouteFeature; 
            openCloseGrid('routeFeature', showRouteFeature);">
          <span ng-class=
            "{'glyphicon glyphicon-ok icon-ok check-mark': showRouteFeature, 
              'glyphicon no-icon': !showRouteFeature}">
          </span>
          <span class="text">Route Feature</span></a></li>
    </ul>
</div>

在我的.js文件中，我有一个即将关闭的事件：

$(document).on('click', '.ui-dialog-titlebar-close', function () {
    $scope.showRouteFeature = false;
    $scope.apply();
 });

格式有点粗略，但我尽了我所能。当我点击下拉列表中的一个选项时，它会将showRouteFeature上的"点击"设置为true到false，反之亦然。当我点击对话框上的"X"时，它将$scope.showRouteFeature设置为false，这应该会取消选中下拉列表中元素。我可以在控制台中看到，当我点击"X"的时候，$scope.showRouteFeature实际上被设置为false

我发现了这个问题，我该如何告诉AngularJS"刷新"；，以及这篇帖子，http://jimhoskins.com/2012/12/17/angularjs-and-apply.html，这就是为什么我在将变量设置为false后会有$scope.apply()。然而，这并不能刷新我的下拉列表。任何见解都将不胜感激。

这可能不是你的问题，但我怀疑可能是，所以这里是：

警告一下，当像您的例子中那样直接在作用域上使用基元时，您最好非常清楚自己在做什么。一般来说，应该避免。原因是，如果创建了子作用域，原型继承将使子作用域上的属性不会反映在父作用域上。许多内置的Angular指令创建子作用域（脑海中浮现的是ng repeat、ng if、ng switch）。你不会在代码中显示ng重复，但如果它应该像你解释的那样工作，我怀疑你的实际代码中有它。因此，将属性放置到对象中。

一个很好的方法来判断这是否是您的问题，将｛｛showRouteFeature｝｝放在HTML的最顶层，然后将其放在DOM的几个更深层次。如果它们的值开始不同，则存在范围继承问题。

有关更多信息，请参阅此处的第一点：http://blog.technovert.com/2014/02/common-pitfalls-angularjs/

相关文章：