帶\ n的angularjs textarea模型應該開始新行

我有示例json，如下所示，我試圖在textarea（Plunker）中表示標籤和值中的鍵。但是，如果模型包含「\ n」，textarea不起作用。每當有\ n我希望文字出現在新行中。帶 n的angularjs textarea模型應該開始新行

$scope.sampleData = { 
    "id": 10000, 
    "transactionid": "gec43434", 
    "status": "COMPLETED", 
    "session_id": "TTYUU455667", 
    "errors": "1", 
    "start_timestamp": "2016-11-07 02:35:35", 
    "log_field": "\n\nSample Text\nRowX\n\nRowY\nRowZ\n" 
    }

在textarea的，我想「log_field」值將表現爲：

Sample Text 
RowX 
RowY 
RowZ

即使有多個\ n \ n ...應該只有一個換行符。

來源

2016-11-14 Madasu K

Textarea似乎在工作，您需要在textarea中向下滾動以查看「log_field」中的值，因爲它以2 \ n開頭。 –

-1

你可以使用以下方法來刪除多餘的換行字符：

"\n\nSample Text\nRowX\n\nRowY\nRowZ\n".replace(/\n\s*\n/g, '\n');

var text = "\n\nSample Text\nRowX\n\nRowY\nRowZ\n".replace(/\n\s*\n/g, '\n'); 
 
document.getElementById("foo").value = text;

<textarea id="foo"></textarea>

來源

2016-11-14 12:24:40 Christos

這將不適用於動態數據 –

@VatsalJuneja當然會。我只是展示OP如何使用它。顯然，他定義的示例數據具有接近API的格式。在使用API之後，他可以在定義模型之前處理數據。 – Christos

首先，OP沒有使用任何ID。即使我們現在選擇忽略它，由於angularjs的雙向數據綁定，您的解決方案也會更改sampleData中的值，這可能不是必需的。我們現在甚至選擇忽略這一點，你的解決方案不是乾的;這可以非常容易地通過過濾器完成，編寫代碼甚至比OP在重載程序中顯示的代碼更簡單。 –

-1

嘗試添加以下代碼：

$scope.sampleData.log_field = $scope.sampleData.log_field.replace(/\\n{1,}/g,'\\n');

來源

2016-11-14 12:29:42

這不適用於動態數據 –

textarea的似乎是工作，你在向下滾動log_field textarea，因爲它以2 \ n's開頭？

至於最後一個查詢，您應該創建一個自定義過濾器，它可以用一個換行符替換多個連續的換行符。這很簡單，基本，但是如果你需要更多的方向，請告訴我。

有關過濾器的更多信息：https://docs.angularjs.org/guide/filter。它還舉例說明如何創建自定義過濾器。

來源

2016-11-14 12:30:15

是的你是對的。你有我的最後一個查詢的任何解決方案 –

@MadasuK你可以編寫一個角度自定義過濾器，並直接在HTML中使用它，無論你想要的。基本上它們用於格式化數據以供顯示。更多信息請訪問：https：//docs.angularjs.org/guide/filter –

帶\ n的angularjs textarea模型應該開始新行

回答

相關問題