在AngularJS中，ng-click指令用于在用户单击元素时执行表达式。但是，在某些情况下，您可能需要在ng-click中添加条件语句以根据特定条件执行不同的操作。这篇文章将向您展示如何使用条件语句在ng-click中实现此目的。
ng-click基础知识
首先，让我们回顾一下ng-click的基础知识。ng-click指令的一般形式如下：
<button ng-click="expression">Click me</button>
其中，expression是要在单击按钮时执行的AngularJS表达式。例如，以下ng-click指令将在单击按钮时调用控制器中的doSomething()函数：
<button ng-click="doSomething()">Click me</button>
在ng-click中使用条件语句
为了在ng-click中使用条件语句，您可以使用JavaScript中的条件运算符（也称为三元运算符）或if-else语句。例如，以下ng-click指令只有在isAdmin变量的值为true时才会调用控制器中的deleteItem()函数：
<button ng-click="isAdmin ? deleteItem() : null">Delete item</button>
在上面的代码中，如果isAdmin变量的值为true，则deleteItem()函数将被调用。否则，表达式将返回null，并且不会执行任何操作。
如果您想要更复杂的条件判断，那么您可以使用if-else语句。以下是一个示例：
<button ng-click="if (isAdmin) { deleteItem(); } else { showMessage(); }">Do something</button>在上面的代码中，如果isAdmin变量的值为true，则调用deleteItem()函数。否则，将调用showMessage()函数。
示例代码
下面是一个完整的示例，展示了如何在ng-click中使用条件语句：
-- -------------------- ---- -------
--------- -----
----- ---------------
------
------- ------------------------------------------------------------------------------
--------
--- --- - ----------------------- ----
------------------------ ---------------- -
-------------- - ------
----------------- - ---------- -
----------- -----------
--
------------------ - ---------- -
---------- -- --- ---- ---------- -- ------ ---------
--
---
---------
-------
----- -----------------------
------- ----------------- - ------------ - ------------ ---------------------
------- ------------ --------- - ------------- - ---- - -------------- ----- ------------------
-------
-------在上面的示例中，我们定义了一个控制器myCtrl，它包含一个isAdmin变量和两个函数：deleteItem()和showMessage()。第一个按钮只有在isAdmin变量的值为true时才会调用deleteItem()函数。第二个按钮使用if-else语句，如果isAdmin变量的值为true，则调用deleteItem()函数。否则，将调用showMessage()函数。
结论
在本文中，我们学习了如何在AngularJS的ng-click指令中使用条件语句来根据特定条件执行不同的操作。您可以使用JavaScript中的条件运算符或if-else语句来实现此目的。希望这篇文章能够帮助您更好地理解AngularJS中的ng-click指令，并且让您能够更灵活地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25127