ng-click中的if语句


73

有没有办法在ng-click内放置条件?在这里,如果存在任何表单错误,我希望不提交该表单,但是我得到了一个解析异常。

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

我尝试使用ng-disabled,但是我的验证插件无法正常工作,因为根本不提交表单,因此不会触发。



@falinsky不,这对我没有帮助
春天,

检查以下问题的答案:如何在AngularJS中的ng-click上创建条件。它要么NG-点击= “profileForm $ &&有效updateMyProfile()”或NG-点击= “profileForm $无效|| updateMyProfile()。”
卫辉市国

Answers:


149

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

在控制器上执行此操作。

模板:

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

控制器:

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

35
例如:<a ng-click="pluginsChanged ? restartServer($event) : null" href="https://stackoverflow.com/">Back</a>仅从HTML来看,很明显,当单击此链接时,如果插件已更改,则服务器将重新启动,否则不会发生任何特殊情况。如果将其放在控制器中,我将需要一个单独的函数,因为我使用restartServerelesewhere,并且在HTML中不会明显发生什么。
乔纳森。

1
如果以后有人怀疑为什么单击后退按钮时服务器有时会重新启动,这将立即显现出来。不必让他们去寻找功能并查看它在什么条件下重新启动。
乔纳森。

6
抱歉,但不能认为此答案有用,您无需解释,@ Jonathan。的评论有效
Pedro Justo 2015年

1
这是正确的答案。流条件是逻辑的一部分,因此应放在控制器中。Angular提供了if和show指令来“表示”更改,但是即使它们也应该通过控制器输入。
Manatax 2015年

1
这是一个完美的答案,您不必在视图中放入逻辑,而if语句只是该逻辑。您进行由控制器处理的函数调用,如果该函数的逻辑可以重复并在站点的不同区域使用,则有时会将该函数的逻辑委派给服务。
埃里克·比斯哈德

58

这可能无关紧要,也没有用,但由于是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提供的链接一样。


它应该是“如果配置文件无效,则什么也不会发生,”
春季

2
这是对实施不良做法的问题的答案的正确方法。但是,就像其他答案一样,这也不是最佳实践。至少在视图中实现逻辑时,您应该问自己:A)我是否可能不得不更改它,如果答案是肯定的,那么您需要在控制器中执行该逻辑。您在整个网站上都开始这样做,将来将很难测试或更改任何东西。这是许多头痛的入门药物。
埃里克·比斯哈德

IMO,这是针对给定问题的最佳解决方案。如果有效性条件有些复杂,则可以肯定地将其输入控制器。谢谢!
Kalpesh Panchal'5

34

我发现这是一种可能对您有用的hack,尽管它并不漂亮,而且我个人会尴尬地使用这样的代码行:

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

现在,您必须考虑“但如果我的身份无效,我不希望它发出警报(“失败”)profileForm。好吧,这是丑陋的部分。对我来说,无论我在此三元语句的else子句中输入什么内容,都永远不会执行。

但是,如果将其删除,则会引发错误。因此,您可以使用无意义的警报来填充它。
我告诉你这很丑...但是当我做这样的事情时,我什至没有得到任何错误。
正确的方法是如Chen-Tsu所提到的,但要针对每个人。


2
有时,在模板中执行此操作很有意义。谢谢你的提示。由于三元数需要正负两个结果,因此出现错误2。这对我ciCtrl.iconSelections.style === 2 ? ciCtrl.iconSelections.style = 1 : blah
Justin Noel

我在多个地方使用了类似的方法。ng-class =“ column.columnname!='vendor'?'alt-content-hoverable':false”
Deathstalker

13

如果您确实必须这样做,可以使用以下几种方法:

使用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

我们可以有条件地添加ng-click事件,而无需使用禁用的类。

HTML:

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

这回答了这个问题,我只是不会将其称为最佳实践。但这再次完美地回答了这个问题。我觉得应该用解释为什么它是不良形式的声明来打扰。但是你不能说他没有回答实际问题。
埃里克·比斯哈德



0

写为

<input type="submit" ng-click="profileForm.$valid==true?updateMyProfile():''" name="submit" value="Save" class="submit" id="submit">
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.