自定义选择选项不适用于angular，但适用于html、css模板

Question

script.js

const select = document.querySelectorAll('.selectBtn');
const option = document.querySelectorAll('.option');
let index = 1;
select.forEach(a => {
a.addEventListener('click', b => {
const next = b.target.nextElementSibling;
next.classList.toggle('toggle');
next.style.zIndex = index++;
})
})
option.forEach(a => {
a.addEventListener('click', b => {
b.target.parentElement.classList.remove('toggle');

const parent = b.target.closest('.select').children[0];
parent.setAttribute('data-type', b.target.getAttribute('data-type'));
parent.innerText = b.target.innerText;
})
})

call.component.html

<div class="select">
<div class="selectBtn" data-type="callType">Show all calls</div>
<div class="selectDropdown">
<div class="option" data-type="callType"><span class="dot none"></span>Show all calls</div>
<div class="option" data-type="callType"><span class="dot open"></span>Open</div>
<div class="option" data-type="callType"><span class="dot pending"></span>Pending</div>
<div class="option" data-type="callType"><span class="dot wrap"></span>Wrap</div>
<div class="option" data-type="callType"><span class="dot covered_n_c"></span>Covered not called</div>
<div class="option" data-type="callType"><span class="dot covered"></span>Covered & called</div>
<div class="option" data-type="callType"><span class="dot time_change"></span>Wrap time change</div>
<div class="option" data-type="callType"><span class="dot c_dispatch"></span>Cancelled by dispatch</div>
<div class="option" data-type="callType"><span class="dot c_patient"></span>Cancelled by patient</div>
</div>
</div>

这个script.js文件的代码在HTML、CSS模板中运行得很好。但当我把它放进棱角分明的项目中时。它不起作用。需要解决方案。提前感谢：)

Answer 1

在AngularJS中，其思想是避免直接操纵DOM

相反，您可以设置Javascript变量，并使用ng-if打开或关闭元素，或者使用ng-class打开或关闭类。

我不完全确定你想要实现什么，但这里有一段简单的代码，它至少可以完成第一个按钮的工作。您可以展开它来执行您想要的下拉按钮。

请注意，不需要JS或DOM操作(至少对于这个简单级别的任务)。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script><script> const app = angular.module("myModule", []);</script>

<div ng-app  class="select">
<button class="selectBtn" data-type="callType" ng-click="showDropdown=true">Show all calls </button>
<div class="selectDropdown" ng-if="showDropdown">
<div class="option" data-type="callType"><span class="dot none"></span>Show all calls</div>
<div class="option" data-type="callType"><span class="dot open"></span>Open</div>
<div class="option" data-type="callType"><span class="dot pending"></span>Pending</div>
<div class="option" data-type="callType"><span class="dot wrap"></span>Wrap</div>
<div class="option" data-type="callType"><span class="dot covered_n_c"></span>Covered not called</div>
<div class="option" data-type="callType"><span class="dot covered"></span>Covered & called</div>
<div class="option" data-type="callType"><span class="dot time_change"></span>Wrap time change</div>
<div class="option" data-type="callType"><span class="dot c_dispatch"></span>Cancelled by dispatch</div>
<div class="option" data-type="callType"><span class="dot c_patient"></span>Cancelled by patient</div>
</div>
</div>