首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在一个页面中多次使用angularjs dropDown指令,如何在单击另一个指令时关闭指令并获取该特定指令的值

在一个页面中多次使用AngularJS DropDown指令时,可以通过以下步骤来关闭指令并获取特定指令的值:

  1. 首先,在每个DropDow指令的控制器中,创建一个变量来保存当前指令的状态和值。例如,可以使用一个布尔变量来表示指令是否打开,以及一个变量来保存选中的值。
  2. 在每个DropDow指令的模板中,使用ng-click指令来绑定一个函数,该函数会在点击指令时被调用。这个函数将会改变指令的状态和值。
  3. 在这个函数中,首先关闭所有其他的指令。可以通过遍历所有指令的控制器来实现这一点,然后将它们的状态设置为关闭。
  4. 接下来,将当前指令的状态设置为打开,并将选中的值保存到指令的变量中。

下面是一个示例代码:

代码语言:html
复制
<!-- DropDown指令模板 -->
<div ng-controller="DropDownController">
  <button ng-click="toggleDropDown()">Toggle DropDown</button>
  <ul ng-show="isOpen">
    <li ng-repeat="option in options" ng-click="selectOption(option)">{{ option }}</li>
  </ul>
</div>

<!-- 页面中多次使用的DropDow指令 -->
<drop-down></drop-down>
<drop-down></drop-down>
<drop-down></drop-down>

<script>
  angular.module('myApp', [])
    .controller('DropDownController', function($scope) {
      $scope.isOpen = false;
      $scope.selectedValue = '';

      $scope.toggleDropDown = function() {
        // 关闭其他指令
        var dropDowns = document.querySelectorAll('drop-down');
        for (var i = 0; i < dropDowns.length; i++) {
          dropDowns[i].controller.isOpen = false;
        }

        // 切换当前指令的状态
        $scope.isOpen = !$scope.isOpen;
      };

      $scope.selectOption = function(option) {
        $scope.selectedValue = option;
      };
    });
</script>

在上面的示例中,每个DropDow指令都有自己的控制器和模板。控制器中的isOpen变量表示指令的状态,selectedValue变量保存选中的值。toggleDropDown函数用于切换指令的状态,selectOption函数用于保存选中的值。

通过在每个指令中使用不同的控制器和模板,可以在同一个页面中多次使用AngularJS DropDown指令,并且能够独立地关闭指令并获取特定指令的值。

请注意,以上示例中的代码仅为演示目的,实际使用时可能需要根据具体情况进行适当的修改和调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券