Javascript 基于特定条件使用ng Show/ng hide显示/隐藏元素
我有以下资料:Javascript 基于特定条件使用ng Show/ng hide显示/隐藏元素,javascript,html,angularjs,Javascript,Html,Angularjs,我有以下资料: <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
<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中有数据,则隐藏文本框并显示链接
-如果单击编辑按钮,则隐藏链接并显示文本框
此字段为必填字段。但是,有些电子邮件地址字段需要以相同的方式工作,但不是必填字段。有没有办法在angular中做到这一点,而不将一堆布尔值设置为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>";
$scope.cuWebsite=“您的网站”
当有数据时,我会这样做:
$scope.cuWebsite = "<span class='placeholder'>Your Website</span>"
$scope.cuWebsite = "<a href='http://" + vm.cuinfodata.Website + "' target='_blank'>" + vm.cuinfodata.Website + "</a>";
$scope.cuWebsite=”“;
单击“编辑”按钮时,将设置ng隐藏属性。这可能不是一种优雅的方式,但它满足了要求。是否希望只有同一用户才能看到添加的链接?或者其他人也应该看到这个链接?如果只需要第一个,可以使用localStorage或localfough之类的工具。第二个需要一个服务器端来存储您的数据。所有用户都会看到该链接。当页面第一次加载时,所有字段都被禁用。如果网站有URL,它将显示为链接。单击“编辑”按钮后,所有字段都将启用,网站的URL将成为一个输入字段,其中的URL将在必要时进行修改。因此,在非编辑模式下,显示为链接;编辑模式显示为包含URL的文本框。