根据特定条件使用ng显示/ng隐藏来显示/隐藏元素

Show/hide elements using ng-show/ng-hide based on certain conditions

本文关键字：隐藏 显示 ng 元素 特定条件      更新时间：2023-09-26

我有以下内容：

<input class="form-field form-control" type="text" 
     name="Website" ng-model="vm.infodata.Website"
     placeholder="Website Address" maxlength="50"
     required ng-pattern="/^(www'.)?[a-zA-Z0-9_'-]+'.([a-zA-Z]{2,4}|[a-zA-Z]{2}'.[a-zA-Z]{2})('/[a-zA-Z0-9'-'._'?'&=,''+%'$#~]*)*$/"
     ng-readonly="vm.isreadonly" ng-disabled="vm.applyDisabled">
     <div class="form-field form-control disabled" >
         <a target="_blank" href='http:''{{vm.infodata.Website}}'>{{vm.infodata.Website}} </a>
     </div>

从本质上讲，要求是，如果用户在输入中输入URL并在下次加载页面时保存，它将显示为链接而不是输入字段。-如果页面加载时vm.infodata.Website中没有数据，则显示输入并隐藏链接。-如果页面加载时vm.infodata.Website中有数据，则隐藏文本框并显示链接-如果单击编辑按钮，则隐藏链接并显示文本框

此字段为必填字段。但是，有些电子邮件地址字段需要以相同的方式进行操作，但不是必需字段。有没有一种方法可以在不将一堆布尔值设置为true和false的情况下，在角度上做到这一点，并在此基础上隐藏/显示不同的字段？

我最终更改了一些代码。

我现在有一个带有占位符的输入字段，用于点击"编辑"按钮时的

 <input class="form-field form-control" ng-show="vm.visibleBoolean" required placeholder="Credit Union Website" 
                                       ng-pattern="/^(www'.)?[a-zA-Z0-9_'-]+'.([a-zA-Z]{2,4}|[a-zA-Z]{2}'.[a-zA-Z]{2})('/[a-zA-Z0-9'-'._'?'&=,''+%'$#~]*)*$/" 
                                       name="CUWebsite" type="text" ng-model="vm.cuinfodata.Website" maxlength="50" 
                                       ng-readonly="vm.isreadonly" ng-disabled="vm.applyDisabled">

然后在下面我使用ng-bind-html:

<div class="form-field form-control disabled" ng-hide="vm.visibleBoolean" ng-bind-html="cuWebsite"></div>

在控制器中，如果没有数据，我会这样做：

$scope.cuWebsite = "<span class='placeholder'>Your Website</span>"

当有数据时，我会这样做：

$scope.cuWebsite = "<a href='http://" + vm.cuinfodata.Website + "' target='_blank'>" + vm.cuinfodata.Website + "</a>";

单击编辑按钮时，将设置ng隐藏属性。这可能不是一种优雅的方式，但它满足了要求。

相关文章：