將字段類型從div轉換爲點擊輸入

我有一個應該像這樣顯示的div，但是當您點擊div時，我需要它轉換爲輸入字段。將字段類型從div轉換爲點擊輸入

這是我有什麼是點擊該分區前：

<div>This is the content.</div>

我婉這成爲了繼單擊時：

<input>This is the content.</input>

而當用戶點擊其他地方改回來。

Angular有這樣的可能嗎？我看着使用ng-change作爲一個HTML標記，但是我似乎無法完成它。

任何幫助表示讚賞。

來源

2016-06-18 Neekoy

試試這個

<div ng-click='toggleShowInput()' ng-hide='showInput' >This is the content.</div> 
<input ng-show='showInput'>This is the content.</input>

和控制器具有功能如

function cntrl($scope){ 

    $scope.showInput = false; 
    $scope.toggleShowInput = function() 
    { 
     $scope.showInput = !$scope.showInput; 
    } 
}

來源

2016-06-18 15:43:38

你可以檢查鏈接https://plnkr.co/edit/8Ip1yQgCqBIne9IyUIDQ?p=preview –

這是一個非常有用的答案，因爲它也教會做一個更好的做逆向分配的方法。我曾經這樣做（true）{var = false; } else {var = true; }你的方法更好讀。非常感謝：） – Neekoy

如果您使用的角度，你應該寫兩個元素，切換一個爲其他當用戶點擊：

<!DOCTYPE HTML> 
 
<html ng-app> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
</head> 
 
<body> 
 
    <div ng-show="!inputIsOn" ng-click="inputIsOn = true">Click here</div> 
 
    <input ng-show="inputIsOn" type="text"> 
 
</body> 
 
</html>

來源

2016-06-18 15:42:35

沒有，但好消息是，你不需要這樣的事情發生！

在你的控制器：

$scope.showInput = false; 
$scope.myContent = "This is the content";

回到你的HTML文件：

<div ng-hide="showInput">{{myContent}}</div> 
 
<input ng-show="showInput" ng-model="myContent" type="text" /> 
 
<button ng-click="showInput = true" />

現在單擊該按鈕時，輸入字段將顯示，但文本將不會。

來源

2016-06-18 15:48:14

將字段類型從div轉換爲點擊輸入

回答

相關問題