AngularJS中如何结合ng-if与ng-click实现条件触发函数？

嗨，我来帮你搞定这个问题！你想要实现的是只有当values.valuesNumber > 0时，点击下拉图标才会执行$ctrl.doSomething(values)，同时让用户能直观看到图标是否可点击对吧？你之前的写法问题出在结构冗余，把点击事件绑定在了空的<span>上，导致点击区域不对，事件也没生效。下面给你几种简洁有效的实现方式：

方案1：直接在ng-click中加入条件判断（最简便） #

这种方式不用大幅改动原有结构，通过逻辑与&&来控制函数是否执行，同时添加样式区分可点击状态：

<span>{{values.valuesNumber}} 
  <i class="fas fa-caret-down" 
     ng-click="values.valuesNumber > 0 && $ctrl.doSomething(values)"
     ng-class="{'cursor-pointer': values.valuesNumber > 0, 'cursor-not-allowed': values.valuesNumber <= 0}">
  </i> 
</span>

• 逻辑说明：只有values.valuesNumber > 0为真时，才会执行后面的$ctrl.doSomething(values)
• ng-class的作用：给图标添加上可点击的指针光标，或者不可点击的禁止光标，让用户有明确的视觉反馈

方案2：用ng-if控制可点击图标的渲染 #

如果希望数值不大于0时直接隐藏图标，这种方式最直接：

<span>{{values.valuesNumber}} 
  <i ng-if="values.valuesNumber > 0" 
     class="fas fa-caret-down cursor-pointer" 
     ng-click="$ctrl.doSomething(values)">
  </i> 
</span>

• 逻辑说明：当values.valuesNumber > 0时才会渲染这个图标，自然只有能看到图标时才能点击触发事件

方案3：用ng-disabled保留图标但禁用交互 #

如果需要始终显示图标，但仅在数值大于0时允许点击，可以用ng-disabled结合自定义样式（注意：ng-disabled默认针对表单元素，所以需要手动添加禁用样式）：

<span>{{values.valuesNumber}} 
  <i class="fas fa-caret-down" 
     ng-click="$ctrl.doSomething(values)"
     ng-disabled="values.valuesNumber <= 0"
     ng-class="{'cursor-pointer': values.valuesNumber > 0, 'cursor-not-allowed': values.valuesNumber <= 0, 'opacity-50': values.valuesNumber <= 0}">
  </i> 
</span>

• 这里额外加了opacity-50样式，让禁用状态的图标更明显

为什么你之前的代码无效？ #

你之前的写法把点击事件绑定在了一个空的<span>上，并且嵌套在<i>标签内部，导致点击区域根本不在图标上，而且结构冗余，Angular无法正确绑定事件到可交互元素上，所以点击后没有反应。

内容的提问来源于stack exchange，提问作者Leo Messi