ElenaDBA ElenaDBA - 20 days ago 7
AngularJS Question

Make databound input textbox updateable with AngularJS

I have a form with a bunch of labels and textboxes, my controller retrieves data and displays it in those controls:

<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()" />


The display of the data works fine, but
notes
field is optional and in most cases is empty. I want to update the field ona button-click.

Here is the code from my controller that pulls data into
PageData
:

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


Now the issue is that for grabbing the value of
notes
textbox from my controller, I need
ng-model
but if I add
ng-model
to my textbox, I no longer able to see the values from the database for those records that do have notes.

Is there a workaround?

Answer

If I understand what you want correctly... In your html change the ng-model of your text box:

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

In your controller on your process function:

$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");
    });
}

EDIT: Use ng-model to 2-way bind to pageData.notes. This will display the value of pageData.note after your $http.get() and will also allow you to update the value of pageData.notes for you to post back to the server.

Comments