Question

代码：

<div class="input-dropdown-wrapper d-flex space-between vertical-center margin-right-12"
                             ng-class="{'active': historyController.showFilterHistoryDurationDropdown === true}"
                             ng-click="historyController.showFilterHistoryDurationDropdown = true"
                             when-clicked-off="historyController.showFilterHistoryDurationDropdown = false">
                            <p>
                                Show {{historyController.filter}}
                            </p>
                            <i class="fas fa-angle-down"></i>
                            <ul class="input-dropdown"
                                ng-if="historyController.showFilterHistoryDurationDropdown">
                                <li ng-class="{'active': historyController.filter === 'All'}"
                                    ng-click="historyController.filter = 'All';
                                    historyController.showFilterHistoryDurationDropdown = false">
                                    Show All
                                </li>
                                <li ng-class="{'active': historyController.filter === 'In Progress'}"
                                    ng-click="historyController.filter = 'In Progress';
                                    historyController.showFilterHistoryDurationDropdown = false">
                                    Show In Progress
                                </li>
                                <li ng-class="{'active': historyController.filter === 'Completed'}"
                                    ng-click="historyController.filter = 'Completed';
                                    historyController.showFilterHistoryDurationDropdown = false">
                                    Show Completed
                                </li>
                            </ul>
                        </div>

所有这一切都很完美。点击When the <div class="input-dropdown-wrapper...>，<ul>就会显示。

我不明白为什么每个<li>的ng-click的第二部分根本不起作用。

具体谈论这部分：historyController.showFilterHistoryDurationDropdown = false"。

将此值设置为false应隐藏<ul>，就像点击<div>时一样，它会将值设置为true，从而导致<ul>出现。

Answer 1

如果您正在寻找一些Toggle视图解决方案，则ng-click逻辑应切换showFilterHistoryDurationDropdown值，如：

ng-click="historyController.showFilterHistoryDurationDropdown
          ? historyController.showFilterHistoryDurationDropdown = false
          : historyController.showFilterHistoryDurationDropdown = true"

因此，当您点击具有ng-class的div将显示列表（<ul>）时，在第二次单击时它将隐藏列表（<ul>）因此，您的最终代码应如下所示：

<div class="input-dropdown-wrapper d-flex space-between vertical-center margin-right-12"
    ng-class="{'active': historyController.showFilterHistoryDurationDropdown === true}"
    ng-click="historyController.showFilterHistoryDurationDropdown ? historyController.showFilterHistoryDurationDropdown = false : historyController.showFilterHistoryDurationDropdown = true"
    when-clicked-off="historyController.showFilterHistoryDurationDropdown = false">
  <p>
      Show {{historyController.filter}} <br>
      showFilterHistoryDurationDropdown : {{historyController.showFilterHistoryDurationDropdown}}
  </p>
  <i class="fas fa-angle-down"></i>
  <ul class="input-dropdown"
      ng-if="historyController.showFilterHistoryDurationDropdown">
      <li ng-class="{'active': historyController.filter === 'All'}"
          ng-click="historyController.filter = 'All';
          historyController.showFilterHistoryDurationDropdown = false">
          Show All
      </li>
      <li ng-class="{'active': historyController.filter === 'In Progress'}"
          ng-click="historyController.filter = 'In Progress';
          historyController.showFilterHistoryDurationDropdown = false">
          Show In Progress
      </li>
      <li ng-class="{'active': historyController.filter === 'Completed'}"
          ng-click="historyController.filter = 'Completed';
          historyController.showFilterHistoryDurationDropdown = false">
          Show Completed
      </li>
  </ul>

希望这会有所帮助.. :)

AngularJS ng-click无法正常工作

1 个答案: