显示/隐藏元件

我有以下：显示/隐藏元件

<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在页面加载时隐藏的文本框，并显示该链接 - 如果点击编辑按钮隐藏链接并显示文本框

此字段是必需的。但是，有些电子邮件地址字段需要采用相同的方式，但不是必填字段。有没有办法做到这一点角度没有设置一堆布尔值真和假，并隐藏/显示不同的领域的基础上呢？

来源

2015-04-01 rsford31

你想只有同一个用户才能看到添加的链接吗？或者还应该也看到其他链接？如果你只需要第一个，你可以使用localStorage或localForage。第二个需要一个serverside来存储你的数据。 – AWolf 2015-04-04 23:35:46

所有用户都会看到链接。第一次加载页面时，所有字段都被禁用。如果网站有URL，它将显示为链接。点击编辑按钮后，所有字段变为启用状态，网站的URL会变成一个输入字段，其中的URL随时可以修改，如有必要。所以在非编辑模式下，显示为链接;编辑模式显示为带有URL的文本框。 – rsford31 2015-04-10 15:17:00

我最终改变了一下代码。

我现在有输入栏时，“编辑”按钮被点击

<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-绑定-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-hide属性。这可能不是一种优雅的方式，但它能满足要求。

来源

2015-04-24 21:45:06 rsford31

显示/隐藏元件

回答

相关问题