在一个页面中多次使用AngularJS DropDown指令时,可以通过以下步骤来关闭指令并获取特定指令的值:
下面是一个示例代码:
<!-- 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元无门槛券
手把手带您无忧上云