AngularJs中的警告

发布时间：2020-12-17 10:22:34 所属栏目：安全来源：网络整理

导读：Angularjs具有很好的表单验证和显示错误消息的基础结构.但是,我处于一种情况,我必须在特定情况下向用户显示警告消息.这是我简单表格的图表表单已在两个字段上应用了必需和模式验证.除了此验证之外,如果VatAmount不是InvoiceAmount的20％,我希望向用户显示警

Angularjs具有很好的表单验证和显示错误消息的基础结构.但是,我处于一种情况,我必须在特定情况下向用户显示警告消息.这是我简单表格的图表

表单已在两个字段上应用了必需和模式验证.除了此验证之外,如果VatAmount不是InvoiceAmount的20％,我希望向用户显示警告消息.警告将在以下方面与验证不同

>它不会阻止表单提交
>只有两个字段(InvoiceAmount和VATAmount)都出现时才会出现
有效
>警告应该有一个按钮或链接,上面写着“改变和
继续“.当用户按下该按钮时,警告信息将会出现
隐藏和焦点将设置为VATAmount字段.

我相信这是创建指令的完美用例.实际上,我试了一下,把我的努力放在了一个吸血鬼的形式.但我的指令不处理以下情况

>即使警告中涉及的字段无效,也会出现
>显示和隐藏功能未实现(不知道如何
定位它)

Here是与plunker的链接

你的plunkr演示是在正确的轨道上;实际上你只需要检查其中一个值是空的特殊情况.

我建议计算分数并将其存储在范围内,然后观察是否应显示税率警告.以下是计算分数的方法.如果invoice.Amount或invoice.VAT为空,则分数将设置为null.

if (amt == null || vat == null) {
    $scope.warning.fraction = null;
    return;
}
$scope.warning.fraction = vat / amt;

这是有效的,因为如果用户由于您使用ng-pattern而未输入有效数字,那么这些属性将设置为undefined.

但是,虽然将它封装在指令中很好,但您不需要自己编译模板.只需使用内置的ng-transclude指令即可.然后你可以包含一个引用当前范围的按钮,如下所示：

<vat-warning>
       Vat Amount is not 20%.
       <button ng-click="invoice.VAT = invoice.Amount / 5">change</button>
     </vat-warning>

您的指令将包含此声明：

transclude: true,template: '<span class="alert-warning" ng-show="warning.show" ng-transclude></span>'

另外还有一个控制器来更新指令的本地范围以操纵警告对象. Here’s an updated demo.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!