顯示/隱藏元件

我有以下：顯示/隱藏元件

<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

顯示/隱藏元件

回答

相關問題