【问题标题】：if statement in ng-clickng-click 中的 if 语句
【发布时间】：2014-03-14 05:38:37
【问题描述】：

有没有办法在 ng-click 中添加条件？在这里，如果有任何表单错误，我希望表单不提交，但是我得到了一个解析异常。

 <input  ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit">

我尝试使用 ng-disabled 但我的验证插件不起作用，因为表单根本没有提交，所以它没有被触发。

【问题讨论】：

How to make a condition on ng-click in AngularJS 的可能重复项
@falinsky NO 这对我没有帮助
查看这个问题的答案：How to make a condition on ng-click in AngularJS。它是 ng-click="profileForm.$valid && updateMyProfile()" 或 ng-click="profileForm.$invalid || updateMyProfile()"

标签： javascript angularjs

【解决方案1】：

不要在模板中放置任何条件表达式。

在控制器上执行。

模板：

<input ng-click="check(profileForm.$valid)" name="submit" 
       id="submit" value="Save" class="submit" type="submit">

控制器：

$scope.check = function(value) {
    if (value) {
       updateMyProfile();
    }
}

【讨论】：

例如：<a ng-click="pluginsChanged ? restartServer($event) : null" href="/">Back</a> 单看HTML就很明显，当点击这个链接时，如果插件发生了变化，那么服务器会重新启动，否则不会有什么特别的事情发生。如果我把它放在控制器中，我需要一个单独的函数，因为我在其他地方使用了restartServer，而且在 HTML 中发生了什么并不明显。
当其他人后来想知道为什么单击后退按钮时服务器有时会重新启动时，它会立即显现出来。而不是他们必须去寻找函数并查看它在什么条件下重新启动。
对不起，但不能认为这个答案有用，你不解释它，@Jonathan。的评论有效
这是一个正确的答案。流条件是逻辑的一部分，因此应该放在控制器中。 Angular 提供 if 和 show 指令来“表示”更改，但即使它们应该通过控制器提供。
这是一个完美的答案，你不要把逻辑放在你的视图中，if 语句就是那个逻辑。您进行由控制器处理的函数调用，有时，如果该函数的逻辑可以在您网站的不同区域重复和使用，则该函数的逻辑会委托给服务。

【解决方案2】：

这可能无关紧要且没有用，但由于它是 javascript，因此您不必像上面在 ng-click 语句中建议的那样使用三元组。您还应该能够使用惰性求值（“或死”）语法。所以对于你上面的例子：

<input  ng-click="{{if(profileForm.$valid) updateMyProfile()}}" name="submit" id="submit" value="Save" class="submit" type="submit">

会变成：

<input  ng-click="profileForm.$valid && updateMyProfile()" name="submit" id="submit" value="Save" class="submit" type="submit">

在这种情况下，如果配置文件无效，则不会发生任何事情，否则会调用 updateMyProfile()。就像上面@falinsky 提供的链接一样。

【讨论】：

它应该是“如果配置文件无效，那么什么都不会发生”，
这是对实施不良做法的问题的正确答案。但是，就像另一个相同的答案一样，这不是最佳实践。至少当在视图中实现逻辑时，您应该问自己 A) 我是否可能不得不更改它，如果答案是肯定的，那么您需要在控制器中执行该逻辑。您开始在整个网站上执行此操作，将来测试任何内容或更改任何内容都将变得非常困难。这是解决许多头痛问题的入门药物。
IMO，这是给定问题的最佳解决方案。如果有效性条件有点复杂，它肯定可以进入控制器。谢谢！

【解决方案3】：

这是我发现的一个可能对你有用的 hack，虽然它并不漂亮，而且我个人会很尴尬地使用这样一行代码：

ng-click="profileForm.$valid ? updateMyProfile() : alert('failed')"

现在，您一定在想，如果我的profileForm 无效，我不希望它发出警报（“失败”）。好吧，这就是丑陋的部分。对我来说，无论我在这个三元语句的 else 子句中添加什么内容，都不会被执行。

但是，如果将其删除，则会引发错误。所以你可以用一个毫无意义的警报来填充它。
我告诉过你这很丑......但是当我做这样的事情时我什至没有收到任何错误。
正确的做法是如 Chen-Tsu 所说，但每个人都有自己的想法。

【讨论】：

有时在模板中这样做很有意义。谢谢你的提示。得到错误二是因为三元想要一个正面和负面的结果。这对我有用：ciCtrl.iconSelections.style === 2 ? ciCtrl.iconSelections.style = 1 : blah
我在多个地方都使用了类似的东西。 ng-class="column.columnname !='vendor' ? 'alt-content-hoverable' : false"

【解决方案4】：

如果你必须这样做，这里有几种方法：

使用 ng-disabled 禁用按钮

目前为止最简单的解决方案。

<input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... >

使用 ng-if 隐藏按钮（并显示其他内容）

如果您要显示/隐藏一些复杂的标记，可能没问题。

<div ng-if="profileForm.$valid">
    <input ng-click="updateMyProfile()" ... >
</div>
<div ng-if="!profileForm.$valid">
    Sorry! We need all form fields properly filled out to continue.
</div>

（记住，没有ng-else ...）

两者兼而有之

与用户沟通按钮所在的位置（他不会再寻找它），但解释为什么它不能被点击。

<input ng-disabled="!profileForm.$valid" ng-click="updateMyProfile()" ... >
<div ng-if="!profileForm.$valid">
    Sorry! We need all form fields properly filled out to continue.
</div>

【讨论】：

【解决方案5】：

来自http://php.quicoto.com/inline-ifelse-statement-ngclick-angularjs/，如果你真的必须这样做，你就是这样做的：

ng-click="variable = (condition=='X' ? 'Y' : 'X')"

【讨论】：

【解决方案6】：

我们可以在不使用禁用类的情况下有条件地添加 ng-click 事件。

HTML：

  <input ng-click="profileForm.$valid && updateMyProfile()" name="submit" id="submit" value="Save" class="submit" type="submit">

【讨论】：

这回答了这个问题，我只是不会称之为最佳实践。但它再次完美地回答了这个问题。我觉得应该用一个声明来解释为什么它是不好的形式。但你不能说他没有回答实际问题。

【解决方案7】：

您可以在标签内放置条件。试试：

ng-class="{true:'active',false:'disable'}[list_status=='show']"

【讨论】：

【解决方案8】：

写成

<input type="submit" ng-click="profileForm.$valid==true?updateMyProfile():''" name="submit" value="Save" class="submit" id="submit">

【讨论】：