Question

我有一个带有一堆标签和文本框的表单，我的控制器检索数据并将其显示在这些控件中：

 <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添加到我的文本框中，我将无法再看到数据库中有值记录的记录的值。

有解决方法吗？

Answer 1

如果我理解你想要什么...... 在你的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对pageData.notes进行双向绑定。这将在$ http.get（）之后显示pageData.note的值，并且还允许您更新pageData.notes的值以便您回发到服务器。

使用AngularJS使数据绑定输入文本框可更新

1 个答案: