Ng模型覆盖了我在AngularJS的输入字段中输入的任何值

  • Z时代
  • 2024-01-10
  • 分类：问答

Angular ng模型覆盖了我放入输入或textarea值字段中的任何值或表达式。如果我删除ng模型一切正常，但只要我添加ng模型，它使该字段为空..我试图使用控制器的一些值填充ng模型，但它不起作用..Ng模型覆盖了我在AngularJS的输入字段中输入的任何值

<input type="text" ng-model="note.title" value="{{title}}"> 
<textarea ng-model="note.notes">{{notes}}</textarea>

尽管表达式值在元素检查器中正确呈现并存在，但如果模型存在，视图将显示空白表单，否则将显示正确的值。

回答：

HTML代码复制

<form action="update.php" ng-controller="EditController" method="post" id="UpdateForm"> 
    <input type="text" value="{{title}}"> 
    <textarea>{{notes}}</textarea> 
    <input type="submit" value="Submit"> 
</form>

JavaScript代码

var notesId = $routeParams.notesId; 
$scope.editNotes = function() { 
    $http.post('www/edit.php', notesId) 
     .success(function(data) { 
      $scope.allNotes = data; 
      //here i updated value 
      $scope.notes = $scope.allNotes[0].text_notes; 
      $scope.title = $scope.allNotes[0].notes_title; 
     }); 
}; 
$scope.editNotes();

的的$scope.notes & $scope.title值是我想要的东西在表单字段值显示，因为我更新一些东西&我不希望我的用户从头开始。

回答：

这是一个sample JSFiddle使用您的代码作为基础和扩展它。希望这可以帮助。您会注意到我添加了“错误”处理程序，仅仅是因为我没有使用可用的服务。您可以将相同的逻辑复制到“成功”功能，以便表单在您从服务获得成功响应后得到更新。

基本上，样本HTML：

<div ng-app> 
    <form action="update.php" ng-controller="EditController" method="post" id="UpdateForm"> 
     <input type="text" ng-model="notes.title" value="{{title}}"> 
     <textarea ng-model="notes.notes">{{notes}}</textarea> 
     <input type="submit" value="Submit"> 
    </form> 
</div>

和JavaScript示例：

function EditController($scope, $http){ 
    var notesId = 5; 
    $scope.editNotes = function() { 
     $http.post('www/edit.php',notesId) 
      .success(function(data){ 
       $scope.allNotes = data; 
       $scope.notes = $scope.allNotes[0].notes_title; 
       $scope.title = $scope.allNotes[0].notes_title; 
      }) 
      .error(function(data){ 
       $scope.notes = {title: "title", notes: "notes"}; 
      }) 
    }; 
    $scope.editNotes(); 
}

回答：

你不需要，当您使用NG-模型，以指定value属性。只需将值指定给您在ng模型中指定的变量，它将自动填充输入字段。

试试这个：“笔记”

<form action="update.php" ng-controller="EditController" method="post" id="UpdateForm"> 
    <input type="text" data-ng-model="title" /> 
    <textarea data-ng-model="notes"></textarea> 
    <input type="submit" value="Submit"> 
</form>

我在你的代码注意到您在使用它与但你还没有指定控制器别名，如果你想以这种方式使用试试这个：

<form action="update.php" ng-controller="EditController as notes" method="post" id="UpdateForm"> 
     <input type="text" data-ng-model="notes.title" /> 
     <textarea data-ng-model="notes.notes"></textarea> 
     <input type="submit" value="Submit"> 
    </form>

以上是 Ng模型覆盖了我在AngularJS的输入字段中输入的任何值 的全部内容， 来源链接： utcz.com/qa/257913.html

回到顶部