在 ng-click 中的 if 语句

有没有一种方法可以将条件放入到一个 ng-click 中?在这里,如果有任何表单错误,我希望表单不被提交,但是我得到了一个解析异常。

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

我试图使用禁用的,但后来我的验证插件不工作,因为表单从来没有提交,所以它不会被触发。

184307 次浏览

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

去主计长那里。

模板:

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

总监:

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

下面是我发现的一个可能对你有用的代码,尽管它并不漂亮,我个人对使用这样一行代码感到尴尬:

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

现在,你一定在想‘如果我的 profileForm无效,我不希望它发出警报(‘失败’)。’。这就是丑陋的地方。对我来说,不管我在这个三元语句的 else 子句中放入了什么,它都不会被执行。

但是如果它被删除了,就会抛出一个错误,所以你可以用一个毫无意义的警告来填充它。
我告诉过你它很丑陋... 但是我做这样的事情时,甚至没有出现任何错误。
这样做的正确方法是正如振子所说的,但是每个人都有自己的方法。

这可能是不相关的,也没有用处,但是因为它是 javascript,所以不必像上面在 ng-click 语句中建议的那样使用三元组。您还应该能够使用延迟计算(“ or die”)语法。因此,对于你上面的例子:

<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 提供的链接。

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

HTML:

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

http://php.quicoto.com/inline-ifelse-statement-ngclick-angularjs/开始,如果你真的必须这样做,你可以这样做:

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

你可以在标签中加上条件语句,试试:

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

如果你不得不这样做,这里有一些方法:

禁用 n- 禁用按钮

目前为止最简单的解决办法。

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

写作

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