使數據綁定輸入文本框更新與AngularJS

我有一堆標籤和文本框的形式，我的控制器檢索數據並將其顯示在這些控件：使數據綁定輸入文本框更新與AngularJS

<label>ID: {{pageData.ID}}</label><br/> 
<label>Title: {{pageData.title}}</label></br> 
<input type="text" name="notes" placeholder="Notes" value="{{pageData.notes}}" /> 

<input type="button" name="btnProcess" class="action-button" value="Process" ng-click="Process()" />

數據的顯示效果還算不錯，但notes字段是可選的，並且在大多數情況下是空的。我想更新按鈕上的字段。

這裏是我的控制器代碼中提取數據到PageData：

$http.get(window.baseApiUrl + '/GetPageData'). 
     then(function (result) {    
      $scope.pageData = result.data; 
     });

現在的問題是，從我的控制器斂notes文本框的值，我需要ng-model，但如果我添加ng-model我文本框中，我不再能夠從數據庫中查看具有註釋的記錄的值。

是否有解決方法？

來源

2016-11-11 ElenaDBA

好吧，發佈你的代碼。你有沒有填充ngModel引用該字段值的字段？如果其他字段不能被編輯/更新，爲什麼你使用輸入來顯示它們？我有這種感覺，你應該開始理解ng模型是如何工作的。單一的事實是模型。該視圖，由於ngModel顯示模型包含什麼。你需要......有一個模型。 –

你是什麼意思「如果我添加ng模型到我的文本框中，我不再能夠看到數據庫中的值」？這就是'ng-model'的用途;如果沒有看到代碼的完整*圖片，無論是HTML還是JavaScript，都很難看到其他可能的可能性。 – Claies

不要做'value =「{{...}}」'...這不是「數據綁定」輸入。 – Claies

如果我知道你想什麼正確... 在HTML更改文本框的NG-型號：

<input type="text" name="notes" placeholder="Notes" ng-model="pageData.notes" />

在控制器上的處理功能：

$scope.process = function() { 
    //if you need data persisted to the database you'll call some api 
    //endpoint here to send pageData to the server 
    $http.put(window.baseApiUrl + '/UpdatePageData', $scope.pageData). 
    then(function() {    
     console.log("data persisted"); 
    }); 
}

編輯：使用ng-model將2-way綁定到pageData.notes。這會在$ http.get（）之後顯示pageData.note的值，並且還允許您更新pageData.notes的值，以便將其發送回服務器。

來源

2016-11-11 18:23:02

這是我以前的，但它只能工作，如果'注意'字段是空的數據庫中的特定記錄 – ElenaDBA

你可以發佈更多的代碼嗎？很難看出你的最終目標是什麼。 –

@ElenaDBA你試圖顯示「pageData.notes」的值，並能夠在HTML中的相同輸入中編輯「pageData.notes」？ –

使數據綁定輸入文本框更新與AngularJS

回答

相關問題